如何防止内联块 div 换行？

Question

jsFiddle demo

我希望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>

Answer 1

将white-space: nowrap; 添加到您的.layout 样式声明中。

这将完全满足您的需要：防止 div 换行。

观看

jsFiddle demo

或运行以下 sn -p 全屏并调整其大小：

.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>

Answer 2

这将停止文本换行，并保持内联

.leftContent { float: left; }
.rightContent { overflow: hidden; }