防止内联块div的包装
jsFiddle演示
我想要divs：
- 包装他们的内容，和
- 留在原来的关联线，基本上没有包装。
基本上，当桌子不能留在屏幕上的时候，桌子就会叠在一起。 我宁愿他们隐藏在屏幕之外。
我已经尝试添加overflow: hidden; 到主要的布局风格。 我不想修复每个div的宽度。 它需要适应内容。
.layout { -moz-border-radius: 15px; border-radius: 15px; vertical-align: top; display: inline-block; } .layoutbacking { -moz-border-radius: 15px; border-radius: 15px; padding: 5px; margin: 5px; background: #CCCCCC; }
<div class="layout" style="background: #222222; width: 100%"> <div> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div> <div class="layout"> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div> <br /> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div> </div> </div> <div> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div>
添加white-space: nowrap; 到你的.layout风格的声明。
这将做到你所需要的：防止divs包装。
看着
jsFiddle演示
或者全屏运行以下代码片段并调整其大小：
.layout { white-space : nowrap; /* this does the trick */ overflow : hidden; /* this prevents the grey divs from overflowing */ vertical-align : top; border-radius : 15px; display : inline-block; } .layoutbacking { border-radius : 15px; background : #CCCCCC; padding : 5px; margin : 5px; }
<div class="layout" style="background: #222222; width: 100%"> <div> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div> <div class="layout"> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div> <br /> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div> </div> </div> <div> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div> <div class="layout layoutbacking"> <table> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div>
这将停止文本换行，并保持内联
.leftContent {float：left; }
.rightContent {overflow：hidden; }
