防止表格向下推浮动左侧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

回答

相关问题