在另一個DIV中浮動DIV

對於我的網頁，我有一個容器DIV，其中包含菜單DIV和內容DIV。我在內容DIV中安排了幾個「設置」DIV，我想讓它們在內容DIV中向左浮動，但是下面的DIV在菜單DIV下結束。在另一個DIV中浮動DIV

檢查這個的jsfiddle清楚地看到：http://jsfiddle.net/4KUTy/5/

的settingsdivs有float:right;的性能，但離開錯了位置的最後一個，如果我float:left;，然後它的菜單下。

請幫忙。

的jsfiddle HTML代碼在這裏：

<html> 
<head/> 
<body> 
<div id="container"> 
    <div class="menu"> 
     <ul> 
      <li>menu option 1</li> 
      <li>menu option 2</li> 
      <li>menu option 3</li> 
      <li>menu option A</li> 
      <li>menu option B</li> 
      <li>menu option C</li> 
     </ul> 
    </div> 
    <div id="content"> 
     <div class="settings_div">Project Settings<br/> 
    <ul style="display:inline-block"> 
     <li>language</li> 
     <li>currency</li> 
     <li>mark up</li> 
    </ul> 
</div>  
<div class="settings_div">Your Company Settings<br/> 
    <ul style="display:inline-block"> 
     <li>company details</li> 
     <li>bank details</li> 
     <li>contact details</li> 
    </ul> 
</div> 
<div class="settings_div">Output Settings <br/> 
    <ul style="display:inline-block"> 
     <li>company logo</li> 
     <li>date format</li> 
     <li>fonts etc</li> 
    </ul> 
</div> 
<div class="settings_div">Graphical Settings<br/> 
    <ul style="display:inline-block"> 
     <li>colors</li> 
     <li>text size</li> 
     <li>more</li> 
    </ul> 
</div> 
<div class="settings_div">I WANT THIS ONE ON THE LEFT!<br/> 
    <ul style="display:inline-block"> 
     <li>But NOT under the menu</li> 
     <li>float:left puts it under the menu</li> 
     <li>should be under graphical settings</li> 
    </ul> 
</div> 
    </div>    
</div> 
</body> 
</html>

的jsfiddle此處的CSS：

.settings_div { 
    text-align:left; 
    display:inline; 
    width:300px; 
    height:80px; 
    padding:20px; 
    padding-top:10px; 
    margin:20px; 
    margin-top:0px; 
    margin-bottom:20px; 
    border-color:#33CCCC; 
    border-style:solid; 
    border-width:thick; 
    float:right; 
} 

#content { 
    width:600; 
    min-height:620px; 
    vertical-align:top; 
    display: inline; 
} 

.menu { 
    padding:5px; 
    background-color:#33CCCC; 
    float:left; 
    text-align:left; 
    width:auto; 
} 

#container { 
    margin-bottom:10px; 
    background-color:#eee; 
    width:950px; 
    min-height:620px; 
    border-radius:0px; 
    position:relative; 
    margin-top:-10; 
    margin-right:auto; 
    margin-left:auto; 
    overflow: visible; 
}

來源

2013-02-18 Peter

浮動的div的容器應當具有：

overflow: hidden; /* Makes the container actually "contain" the floated divs */ 
display: block;

的浮動的div應該是

float:left

小提琴：http://jsfiddle.net/4KUTy/5/

我找到一個不錯的帖子試圖解釋爲什麼溢出：隱藏工作的方式：http://colinaarts.com/articles/the-magic-of-overflow-hidden/

如果鏈接死亡：將溢出設置爲除可見以外的任何內容將導致它建立一個新的塊格式上下文（http://www.w3.org/TR/CSS21/visuren.html#block-formatting）。

來源

2013-02-18 16:07:26 cernunnos

你是最簡單的答案，它的工作。非常感謝，我很感激。 – Peter 2013-02-18 22:46:43

它確實有效，但我無法理解溢出和顯示：塊與它有什麼關係。任何鏈接，請？ – opensas 2014-03-18 05:16:11

@opensas添加了幾個鏈接來幫助您 – cernunnos 2014-03-18 18:03:33

的最後一個div

<div class="settins_div placeholder">placeholder</div>

前只需添加一個佔位符的div並添加CSS規則

.placeholder{ 
visibility: hidden; 
}

擁有的jsfiddle檢查：here

來源

2013-02-18 15:59:40 Vogel612

非常接近但沒有雪茄。感謝發佈。 – Peter 2013-02-18 22:47:29

使所有settings_divfloat:left;，但使用浮動權，是足夠寬另一個容器：

<div id="setting-container" style="float:right;width:800px;"> 
    <div class="settings_div">Your Company Settings<br/> 
     <ul style="display:inline-block"> 
      <li>company details</li> 
      <li>bank details</li> 
      <li>contact details</li> 
     </ul> 
    </div> 
    <div class="settings_div">Output Settings <br/> 
     <ul style="display:inline-block"> 
      <li>company logo</li> 
      <li>date format</li> 
      <li>fonts etc</li> 
     </ul> 
    </div> 
    <div class="settings_div">Graphical Settings<br/> 
     <ul style="display:inline-block"> 
      <li>colors</li> 
      <li>text size</li> 
      <li>more</li> 
     </ul> 
    </div> 
    <div class="settings_div">I WANT THIS ONE ON THE LEFT!<br/> 
     <ul style="display:inline-block"> 
      <li>But NOT under the menu</li> 
      <li>float:left puts it under the menu</li> 
      <li>should be under graphical settings</li> 
     </ul> 
    </div> 
</div>

jsfiddle

來源

2013-02-18 16:00:34

+1感謝您的回覆 - 正常工作，但@cermunnos回答更簡潔（無需添加另一個div），因此選擇了該答案。 – Peter 2013-02-18 22:49:17

只有小幅改動css規則：

您應該爲菜單添加固定寬度。

.menu { 
    padding:5px; 
    background-color:#33CCCC; 
    float:left; 
    text-align:left; 
    width:150px; 
}

而且您的容器需要通過該值「移動」+右邊距。所以需要添加margin-left到它：

#content { 
    width:600; 
    min-height:620px; 
    vertical-align:top; 
    margin-left: 160px; 
}

設置你的#container到overflow: hidden。

現在每個設置div都應該左移。

您的jsfiddle的更新版本： http://jsfiddle.net/4KUTy/8/

來源

2013-02-18 16:03:18

感謝發佈 - 您的解決方案似乎工作正常，但我去了一個更簡單的答案，沒有涉及利潤。再次感謝。 – Peter 2013-02-18 22:53:36

兩件事情在這裏錯了：

的包裝div.content設置爲顯示：內聯。
包裝div.content不能正確縮放，因爲所有子元素都不在流中。

爲了使設置的div守分使用：

.content { display: block; overflow: hidden; }

，然後左浮動所有設置div的。

見更新小提琴： http://jsfiddle.net/4KUTy/7/

來源

2013-02-18 16:07:09 MarkSmits

+1感謝發佈 - 您的解決方案正是我所需要的。 @cermunnos第一次雖然...... =） – Peter 2013-02-18 22:51:41

我查過了，我用幾秒鐘就打敗了他。但沒關係，很高興你能夠正常工作。 xD – MarkSmits 2013-02-19 08:31:38

這裏是我的結果http://jsfiddle.net/burn123/4KUTy/10/

重大變化

我改變了很多float屬性來display:inline-block。這是因爲所有元素都能正確定位。
我脫掉了寬度爲container，所以現在應該是
我刪除了settings_div類輕微反應更靈敏，在CSS改變CSS來#content div保存代碼
新增display:inline-block到ul並把它關閉內聯樣式
一個相當大的問題是，您的內容屬性設置爲width:600，當它需要爲width:600px;時。我最終取消了這種風格。
因爲你有#container設置爲relative定位，後來我改變margin-top:-10;到top:-10px;

小的變化

凝聚了很多，如margin性能和border
刪除了width,overflow和min-height從容器，因爲它們毫無用處

更新 - http://jsfiddle.net/burn123/4KUTy/12/

新增border-box到每一個元素，這樣它會顯示您指定
增加了流體寬度container確切的寬度以便它在需要時與菜單一起顯示，但當它太滿時會下降

來源

2013-02-18 16:38:00

非常感謝您的回覆。雖然Divs並不是我想要的東西。 =） – Peter 2013-02-18 22:45:41

你應該投票它;-) – 2013-02-18 22:48:17

花花公子不是在正確的地方 - 當屏幕寬度減少，他們浮動菜單下，我不想要的。不過，我可能沒有把這100％清楚，所以+1已經完成了。 =） – Peter 2013-02-18 23:00:08

在另一個DIV中浮動DIV

回答

相關問題