如何防止内联块div换行? [英] How to prevent inline-block divs from wrapping?
本文介绍了如何防止内联块div换行?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望div可以:
- 包装内容.
- 停留在它们最初关联的行中，基本上不需要包装.
基本上，这些表在不能停留在屏幕上时彼此堆叠.我希望它们在屏幕外隐藏.
Basically, the tables are stacking below each other, when they can't stay on screen. I would rather they become hidden off screen.
我尝试将overflow: hidden;添加到主布局样式.我不想为每个div固定宽度.它需要适合内容.
I've tried adding overflow: hidden; to the main layout style. I do not want to fix a width for each div. It needs to fit content in.
.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>
推荐答案
在.layout样式声明中添加white-space: nowrap;.
这将完全满足您的需要:防止div换行.
This will do exactly what you need: preventing the divs from wrapping.
观看
或运行以下代码段全屏并调整其大小:
or run the following snippet full screen and resize it:
.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>
这篇关于如何防止内联块div换行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
