インラインブロックdivのラッピングを防ぐ方法
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スタイル宣言。
これはまさに必要なことを行います：divがラップするのを防ぎます。
を見る
または、次のスニペットフルスクリーンを実行してサイズを変更します。
.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; }