避免溢出的盒子下面

在下面中間一行粉色盒子溢出給定的HTML標記框和其下方的灰色盒子。我怎樣才能確保灰箱始終保持粉紅色的箱子。而且，這裏是鏈接到HTML頁面：http://pastehtml.com/view/axc3iain8.html 避免溢出的盒子下面

<html> 
    <head> 
     <title>Page 3</title> 

     <style type="text/css"> 
      body { 
       width: 1000px; 
       margin-left: auto; 
       margin-right: auto; 
      } 

      #header { 
       height: 200px; 
       margin: 2px; 
       margin-bottom: 10px; 
       font-family: Arial,Helvetica,sans-serif; 
       font-size: XX-large; 
       background: gray; 
      } 

      .snip_list { 
       min-height: 100px; 
       margin: 25px auto; 
      } 

      .snippet { 
       width: 323px; 
       float: left; 
       margin: 5px; 
       font-size: small; 
       background: lightpink; 
       display: inline; 
      } 

      #para_middle { 
       margin-top: 10px; 
       background: gray; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="header"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p> 
     </div> 

     <div class="snip_list"> 
      <div class="snippet"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p> 
      </div> 

      <div class="snippet"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p> 
      </div> 

      <div class="snippet"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p> 
      </div> 
     </div> 

     <div id="para_middle" class="para"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum.</p> 
     </div> 

     <div class="snip_list"> 
      <div class="snippet"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p> 
      </div> 

      <div class="snippet"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p> 
      </div> 

      <div class="snippet"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p> 
      </div> 
     </div> 
    </body> 
</html>

來源

2011-06-16 Xolve

我也嘗試刪除「display：inline;」從.snippet，但也沒有工作。 – Xolve 2011-06-16 14:32:25

你可以給

overflow:hidden

到div.snip名單。它應該保持容器的利潤率。

來源

2011-06-16 14:32:21

我很困惑我是否應該使用overflow：隱藏在div.snip-list中或清除：兩者都在#para_middle中爲什麼我應該更喜歡一個到另一個？ – Xolve 2011-06-16 15:31:16

我個人更喜歡使用溢出：隱藏（如果我不需要溢出項目出現即做）可能時，而不是明確的：既，因爲它不會在div-positioning.As任何改變一個例子，我可能需要在後面的DIV浮動左右等等。 – 2011-06-16 15:37:21

在當前情況下，我可以看到溢出全文：隱藏，並沒有什麼隱藏這是不被溢出的定義：https://developer.mozilla.org/en/CSS/overflow – Xolve 2011-06-16 16:29:23

每個「行」

或之後添加<br clear="left" />：

.fix { 
    clear:left; 
    height:1px; 
    margin:-1px 0 0; 
    overflow:hidden; 
} 

<div class="fix"></div>

來源

2011-06-16 14:32:50 roberkules

這是一個合理的方式來做到這一點，但也增加了很多額外的和不必要的標記。這將是一個很好的案件的基礎上，但有更大的元素，更容易目標 – Brombomb 2011-06-16 14:37:04

簡單添加以下.snip_list

clear:both;

我編寫它爲你在這裏 - http://jsfiddle.net/ajthomascouk/EPzWE/

來源

2011-06-16 14:32:55 Alex

謝謝我瞭解jsfiddle。但我認爲你錯誤地提到了.snip_list，而正確的答案會將它添加到#para。 – Xolve 2011-06-16 15:27:24

將clear:both添加到#para_middle將解決此問題。清除將確保元素在浮動元素上不重疊。清除左側將確保左側邊緣清除浮動元素。清除右側將檢查是否正確，清除雙方將檢查左側和右側。

來源

2011-06-16 14:34:52 Brombomb

感謝您的好解釋:) – Xolve 2011-06-16 15:27:37

的問題是，你的snippet s的浮動，因此他們的正常流程之外。您需要製作後續元素clear。實現此目的的一個好方法是在使用CSS的環境元素之後添加隱形清除塊：

.snip_list:after { content: "."; visibility: hidden; display: block; clear: both; }

來源

2011-06-16 14:35:17

'：之後'將無法在IE7和以下。只是擡起頭來 – Brombomb 2011-06-16 14:39:05

避免溢出的盒子下面

回答

相關問題