CSS浮動邊框重疊問題

我想將一個菜單浮動到頁面左側，並且當它變得足夠大到達下面的內容時，Firefox將內容完全顛倒，因爲它應該......除了邊境。CSS浮動邊框重疊問題

下面是幾個項目的截圖：

，另一個幾個項目

「框4」有望被感動了，但它的邊框保持在左邊。吳

HTML：

 
    <?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE html PUBLIC 
     "-//W3C//DTD XHTML 1.0 Strict//EN" 
     " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
     <head> 
      <title></title> 
      <link rel="stylesheet" href="css/main.css" /> 
     </head> 
     <body> 
      <div id="menu"> 
       <ul> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
       </ul> 
      </div> 
      <div id="title"> 
       <img src="img/logo.png" alt="logo" /> 
       <span id="title_text">Title</span> 
      </div> 
      <div id="container"> 
       <div id="box1" class="topbox"> 
        <div class="title">Box 1 Title</div> 
        <div class="content">Content goes here</div> 
       </div> 
       <div id="box2" class="topbox"> 
        <div class="title">Box 2 Title</div> 
        <div class="content">Content goes here</div> 
       </div> 
       <div id="box3" class="topbox"> 
        <div class="title">Box 3 Title</div> 
        <div class="content">Content goes here</div> 
       </div> 
      </div> 
      <div id="box4"> 
       <div class="title">Box 4 Title</div> 
       <div class="content">Content goes here<br />line break</div> 
      </div> 
     </body> 
    </html>

CSS：

#menu { 
    float: left; 
    width: 100px; 
    padding-left: 0px; 
} 

#menu ul { 
    margin: 0px; 
    padding: 10px; 
} 

#title { 
    margin-left: 100px; 
    border: 1px #F00 dashed; 
    height: 40px; 
    font-size: 20pt; 
} 

#title_text { 
    display: inline-block; 
    vertical-align: top; 
    margin-top: 5px; 
} 

#container { 
    margin-left: 100px; 
} 

.topbox { 
    width: 30%; 
    height: 200px; 
    display: inline-block; 
    margin-top: 5px; 
    margin-bottom: 10px; 
    margin-right: 2px; 
    margin: none; 
    border: 1px #F00 solid; 
} 

.topbox .title { 
    text-align: center; 
    border-bottom: 1px #000 solid; 
    padding-top: 1px; 
} 

.content { 
    padding: 2px; 
} 

#box4 { 
    border: 1px #000 solid; 
    width: 100%; 
} 

#box4 .title { 
    display: inline; 
    border-right: 1px #000 solid; 
    border-bottom: 1px #000 solid; 
    padding-left: 2px; 
    padding-right: 2px; 
} 

#box4 .content { 
    display: inline; 
}

來源

2009-08-14 Rena

您可能要發佈此上doctype.com。它更適合這種風格的問題。 – Kredns 2009-08-14 01:58:17

[爲什麼CSS float不會改變下面div的寬度？]（http：// stackoverflow。com/questions/25475822/why-does-css-float-not-change-the-width-of-the-following-div） – 2014-08-24 21:52:16

可以更正通過更新＃box4規則，就像這樣：下面長sidenav

#box4 { 
    border: 1px #000 solid; 
    margin-left: 100px; 
}

編輯＃box4 css：

#box4 { 
    border: 1px #000 solid; 
    clear: both; 
}

來源

2009-08-14 02:02:09 Pat

如果我這樣做了，那麼當菜單中的項目很少時，就會有一個無用的差距在box4的左邊。 – Rena 2009-08-14 02:11:15

您的其他非JavaScript選項將推入＃box4下面的一個long sidenav（編輯示例）如果你用Javascript去，你可以改變box4的風格，當菜單太長，以至於它在它旁邊順利進行。 – Pat 2009-08-14 03:04:26

在「box4」div上面加上下面的行。

<div style="clear:both;"></div>

使你的代碼應該如下：

<div style="clear:both;"></div><!-- including this line clear floats --> 
<div id="box4"> 
<div class="title">Box 4 Title</div> 
<div class="content">Content goes here<br />line break</div> 
</div>

乾杯！

來源

2009-08-14 08:48:35

這實際上推動菜單下方的box4。所以我有三個頂盒，並且它們之間的巨大間隙直到菜單的底部。 – Rena 2009-08-15 17:46:27

你可以浮動＃box4向左..

它不會有但是在寬度爲100％..

正如你udnerstand這是不是可以解決的，因爲100％的寬度總是會亂東西了..你不能在100％的寬度，但不會佔用100％，當推...

來源

2010-01-31 03:28:00

我認爲你不能單獨做到這一點與CSS，因爲你正在與正常的流動。元素通常堆疊在一起，並試圖讓一個人走出頁面，而不是如何工作。

來源

2010-01-31 04:07:52 Rob

box4在其css中應該有一個clear:both;屬性。它應該做的伎倆。我只是測試它，它做你想做的。

#box4 { 
    border: 1px #000 solid; 
    width: 100%; 
    clear:both; 
}

來源

2010-01-31 04:14:49

你已經錯過了box4外容器的。你可以檢查下面的代碼片段。

#menu { 
 
    float: left; 
 
    width: 100px; 
 
    padding-left: 0px; 
 
} 
 

 
#menu ul { 
 
    margin: 0px; 
 
    padding: 10px; 
 
} 
 

 
#title { 
 
    margin-left: 100px; 
 
    border: 1px #F00 dashed; 
 
    height: 40px; 
 
    font-size: 20pt; 
 
} 
 

 
#title_text { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin-top: 5px; 
 
} 
 

 
#container { 
 
    margin-left: 100px; 
 
} 
 

 
.topbox { 
 
    width: 30%; 
 
    height: 200px; 
 
    display: inline-block; 
 
    margin-top: 5px; 
 
    margin-bottom: 10px; 
 
    margin-right: 2px; 
 
    margin: none; 
 
    border: 1px #F00 solid; 
 
} 
 

 
.topbox .title { 
 
    text-align: center; 
 
    border-bottom: 1px #000 solid; 
 
    padding-top: 1px; 
 
} 
 

 
.content { 
 
    padding: 2px; 
 
} 
 

 
#box4 { 
 
    border: 1px #000 solid; 
 
    width: 100%; 
 
} 
 

 
#box4 .title { 
 
    display: block; 
 
    border-right: none; 
 
    border-bottom: 1px #000 solid; 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
    text-align:center; 
 
    
 
} 
 

 
#box4 .content { 
 
    display: inline; 
 
}

<?xml version="1.0" encoding="UTF-8"?> 
 
    <!DOCTYPE html PUBLIC 
 
     "-//W3C//DTD XHTML 1.0 Strict//EN" 
 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
     <head> 
 
      <title></title> 
 
      <link rel="stylesheet" href="css/main.css" /> 
 
     </head> 
 
     <body> 
 
      <div id="menu"> 
 
       <ul> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
       </ul> 
 
      </div> 
 
      <div id="title"> 
 
       <img src="img/logo.png" alt="logo" /> 
 
       <span id="title_text">Title</span> 
 
      </div> 
 
      <div id="container"> 
 
       <div id="box1" class="topbox"> 
 
        <div class="title">Box 1 Title</div> 
 
        <div class="content">Content goes here</div> 
 
       </div> 
 
       <div id="box2" class="topbox"> 
 
        <div class="title">Box 2 Title</div> 
 
        <div class="content">Content goes here</div> 
 
       </div> 
 
       <div id="box3" class="topbox"> 
 
        <div class="title">Box 3 Title</div> 
 
        <div class="content">Content goes here</div> 
 
       </div> 
 
       <div id="box4"> 
 
       <div class="title">Box 4 Title</div> 
 
       <div class="content">Content goes here<br />line break</div> 
 
      </div> 
 
      </div> 
 
      
 
     </body> 
 
    </html>

來源

2018-01-23 09:50:21

CSS浮動邊框重疊問題

回答

相關問題