防止表格向下推浮動左側div

我有兩個float：左側divs，設計爲從左到右堆疊，一個是經典的左側導航欄，並且聲明瞭固定寬度。另一個設計爲跨越瀏覽器的其餘寬度，並填充剩餘寬度的100％。目前它沒有本地或任何js/jQuery聲明的寬度。防止表格向下推浮動左側div

問題出現在第二個div中有一個表格，其中有大約10列表格結果，其中一些表格結果較長。只要表格單元格的累積文本將表格寬度推到它所在div的大小，div就會在左側導航欄下彈出。

是否有任何策略基本上「告訴表」，它不會展開比父div更廣泛的範圍，而是單元格中的文本會換行？我希望不必爲此使用任何JS。

<div id="container"> 
    <div id="leftNav" style="width:250px;"> 
    left<br>nav<br>here<br>   
    </div> 
    <div id="mainContent"> 
     <table> 
      <tr><td>about</td><td>10</td><td>Columns and they can contain sentences of text as well, but I'd like to not have the table push the div it's in down below the left nav div. This illustrates that point!</td></tr> 
     </table> 
    </div> 
</div>

和CSS：

#container{ 
    width:100%; 
} 
#leftNav{ 
    float:left; 
    width:250px; 
    border:1px solid #ccc; 
    padding:15px; 
} 
#mainContent{ 
    float:left; 
    background-color:aliceblue; 
} 
/* nothing more*/

來源

2014-10-01 Samuel Fullman

沒有看到任何代碼，你可以只設置表{最大寬度：「一些寬度」} – 2014-10-01 01:44:04

同意託尼Tambe。 – 2014-10-01 01:45:43

如果你只關心對IE10 +的支持（如這個例子）（http://jsbin.com/vetuv/1/edit），你可以使用'calc（）'。或[顯示：表而不是浮動。]（http://jsbin.com/tuhic/1/edit）IE8 + – misterManSam 2014-10-01 01:52:02

我會用display:table此佈局。主要好處是無論內容寬度如何，列總是排列齊。

html,body { height: 100%; }使百分比高度爲容器被給出display: table
的兩列中給出display: table-cell
左側欄中給出的固定的<body>
子元素寬度和右列沒有寬度

可能的缺點 - display: table兼容IE8 +

CSS/HTML /演示

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
#container { 
 
    width: 100%; 
 
    display: table; 
 
    height: 100%; 
 
} 
 
#leftNav { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    width: 250px; 
 
    border: 1px solid #ccc; 
 
    padding: 15px; 
 
} 
 
#mainContent { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    background-color: aliceblue; 
 
} 
 
/* nothing more*/

<div id="container"> 
 
    <div id="leftNav">left 
 
    <br>nav 
 
    <br>here 
 
    <br> 
 
    </div> 
 
    <div id="mainContent"> 
 
    <table> 
 
     <tr> 
 
     <td>about</td> 
 
     <td>10</td> 
 
     <td>Columns and they can contain sentences of text as well, but I'd like to not have the table push the div it's in down below the left nav div. This illustrates that point!</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

來源

2014-10-01 02:03:58 misterManSam

顯示兩個父div元素爲內聯表，該表將被視爲一個子表，並假設像符合的行爲表。要使單元格的值完全符合單元格的寬度，可以使用word-break: break-all;，這樣可以在需要時顯示內容，如顯示和中斷。

div { 
 
    display: inline-table; 
 
    word-break: break-all; 
 
    width: 40%; 
 
}

<div> 
 
    <p>Hello World</p> 
 
</div> 
 

 
<div> 
 
    <table> 
 
    <tr> 
 
     <td>Table</td> 
 
     <td>Table</td> 
 
     <td>Table</td> 
 
     <td>Table</td> 
 
     <td>Table</td> 
 
     <td>Table</td> 
 
     <td>Table</td> 
 
     <td>Table</td> 
 
     <td>Table</td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2014-10-01 02:06:59

防止表格向下推浮動左側div

回答

相關問題