1. 首頁
  2. 問答
  3. 當文本超出預期時，將文本框保留在原位

當文本超出預期時，將文本框保留在原位

2011-06-17 48 views
2

在下面的HTML頁面（也提供在：http://pastehtml.com/view/axetf58is.html）上方粉紅色框上方一半的淺藍色框將耗盡並留下大量空間因爲第一個框中有一些額外的文本。實際頁面佈局和預期頁面佈局如下：http://pastehtml.com/view/axetwro10.html如何確保所有框均正確放置在網格中。當文本超出預期時，將文本框保留在原位

這是第一個鏈接給我的問題的HTML標記。

<html> 
    <head> 
     <title>Page 7</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; 
      } 

      #first_half { 
       min-width: 500px; 
       min-height: 500px; 
       margin-bottom: 20px; 
       overflow: hidden; 
      } 

      #first_half div.summaries_box { 
       float: left; 
       margin-right: 10px 
      } 

      #para_right { 
       float: right; 
       width: 350px; 
       background-color: gray; 
      } 

      #second_half { 
       clear: both; 
      } 

      #second_half div.summaries_box { 
       float: left; 
       margin-left: auto; 
       margin-right: auto; 
       margin-top: 20px; 
      } 

      div.summary { 
       width: 260px; 
       margin: 5px; 
       float: left; 
       background: lightblue; 
      } 

      h3.summary_header { 
       font-weight: bold; 
       font-variant: small-caps; 
      } 

      #snippets_horizontal { 
       width: 90%; 
       margin-left: auto; 
       margin-right: auto; 
       overflow: hidden; 
      } 

      #snippets_horizontal .snippet { 
       float: left; 
       width: 45%; 
       margin-right: 5%; 
       font-size: small; 
       background-color: lightpink; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="header"> 
      <p>Lorem ipsum dolor sit amet</p> 
     </div> 

     <div id="first_half"> 
      <div class="summaries_box" style="width: 600px;"> 
       <div class="summary"> 
        <h3 class="summary_header">Lorem ipsum dolor sit amet</h3> 
        <ul class="summary_list"> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
        </ul> 
       </div> 

       <div class="summary"> 
        <h3 class="summary_header">Lorem ipsum dolor sit amet</h3> 
        <ul class="summary_list"> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
        </ul> 
       </div> 

       <div class="summary"> 
        <h3 class="summary_header">Lorem ipsum dolor sit amet</h3> 
        <ul class="summary_list"> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
        </ul> 
       </div> 

       <div class="summary"> 
        <h3 class="summary_header">Lorem ipsum dolor sit amet</h3> 
        <ul class="summary_list"> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
        </ul> 
       </div> 
      </div> 

      <div id="para_right" 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. 
       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> 

     <div id="second_half"> 
      <div id="snippets_horizontal"> 
       <div class ="snippet"> 
        <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</p> 
       </div> 

       <div class ="snippet"> 
        <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</p> 
       </div> 
      </div> 

      <div class="summaries_box" style="clear: both;"> 
       <div class="summary"> 
        <h3 class="summary_header">Lorem ipsum dolor sit amet</h3> 
        <ul class="summary_list"> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
        </ul> 
       </div> 

       <div class="summary"> 
        <h3 class="summary_header">Lorem ipsum dolor sit amet</h3> 
        <ul class="summary_list"> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
        </ul> 
       </div> 

       <div class="summary"> 
        <h3 class="summary_header">Lorem ipsum dolor sit amet</h3> 
        <ul class="summary_list"> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
         <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li> 
        </ul> 
       </div> 
      </div> 
     </div> 

    </body> 
</html>

來源

2011-06-17 Xolve

+0

預期的輸出是這樣的：http://i.imgur.com/yZMS3.png – Xolve 2011-06-17 09:05:15

回答

0

給它一個固定的高度，並告訴瀏覽器在內容過多時引入滾動條。

div.summary { 
    height: 200px; 
    overflow: auto; 
}
因爲浮動的特點

jsFiddle Demo

您的佈局休息。在這種情況下，方框3將嘗試將自身浮動到儘可能最早的適合位置，並且由於方框1高於方框2，它將在其旁邊具有一些可用空間。方框3試圖佔據這個位置，沒有爲方框4留出足夠的空間（你認爲這是我猜測的方框3），所以它落在下一行。你也可以嘗試清除Box 3上的浮點數，所以它會一直到下一行（取決於佈局的固定程度，這也可能是一個好的解決方案）。

來源

2011-06-17 07:14:37 kapa

+0

我不會介意不同的高度，但是第一和第三箱失敗之間的巨大差距白目的... – Xolve 2011-06-17 07:19:39

相關問題

 相關問題