如何調整一個div的大小，當其鄰近的div完成調整大小？

我想做一個流體網格網站，現在我正面臨一個問題，只是不能修復只是使用CSS。顯然我做錯了什麼，但我只是找不到。如何調整一個div的大小，當其鄰近的div完成調整大小？

這是事情：我有一列（div：左）和一個正文（div：右）在線顯示。在第一個div左邊的寬度爲180，div右邊正在增長，直到達到640px（如youtube）。在第二階段，我想讓列增長一些，從120px增加到150px，但是當列增長的時候，div右移被推下，即使有足夠的空間。我認爲這與保證金的技術有關，但我無法找到它，並且不知道我可以使用的任何替代方法，因爲我試圖在不使用Java的情況下執行此操作。

這裏是我的jsfiddle：這將清楚地表明瞭問題：http://jsfiddle.net/tomvisser/WcbYL/embedded/result/

我樂意與所有幫助我能。

在此先感謝。

<body> 
<div class="gridContainer clearfix"> 
    <div id="center"> 
    <div id="left">This is the content for Layout Div Tag "left"</div> 
    <div id="right">This is the content for Layout Div Tag "right"</div> 
    </div> 
</div> 
</body>

這裏是CSS：

#left { 
    float: left; 
    height:400px; 
    width: 150px; 
    display:inline; 
    background-color:#F00; 
} 

#right { 
    margin-left:150px; 
    background-color: #6F0 ; 
    height:400px; 
} 


@media only screen and (min-width: 650px) { 
.gridContainer {} 

#right { 
    margin-left:0px; 
    width:500px; 
    float:right; 
    display:inline; 
} 
#left { 
    margin-left:0px; 
    float: right; 
    width:100%; 
    margin-right:500px; 
}

來源

2013-03-19 Tom Visser

我發現你的描述很混亂>。<無論如何，從我目前所瞭解的情況來看，你希望綠色div與紅色div保持在同一水平，而不是被推下。是對的嗎？ – kyooriouskoala 2013-03-19 02:38:08

是的，這是利潤率的下降。不知道你在問什麼，但我可以打賭你打算給2個div的max-width屬性。

所以對於第2步（？媒體查詢），刪除利潤和嘗試做喜歡的事：

max-width: 180px;

爲左側立柱。

這是我在你的媒體查詢塊編輯代碼：

#right { 
    margin-left:0px; 
    width:500px; 
    float:right; 
    display:inline; 
} 
#left { 
    margin-left:0px; 
    float: right; 
    max-width:180px; 
}

雖然你有他們的權利浮動故意？

來源

2013-03-19 06:18:17

嗨，我想你的代碼，並找到you.Hope的解決方案將幫助you.Here我是假設一個頁面的總寬度1,024像素。

HTML代碼

<div class="gridContainer clearfix"> 
    <div id="center"> 
    <div id="right">This is the content for Layout Div Tag "right"</div> 
    <div id="left">This is the content for Layout Div Tag "left"</div> 
    </div> 
</div>

CSS

<style type="text/css" > 
#left { 
    height:400px; 
    background-color:#F00; 
    width:512px; 
} 
#right { 
    background-color: #6F0 ; 
    height:400px; 
    float:right; 
    width:512px; 
} 
</style>

這裏我給寬度512像素每格，因爲我假設頁面的總寬度是1024px.If你想將左邊的寬度增加12像素意味着512px + 12px = 524px 那麼你需要減小div右邊寬度的12px，因爲寬度不能是b e更多然後頁面的總寬度例如1024px.After減少後將變爲500px，再次 524px + 500px = 1024px。在這種情況下，您的右分區不會下推。希望你明白，並會爲你工作。

來源

2013-03-19 06:12:15 Rahul

如何調整一個div的大小，當其鄰近的div完成調整大小？

回答

相關問題