Предотвратить инлайн-блок ДИВС из упаковки

jsFiddle демо

Я хочу, чтобы ДИВС:

  • оберните их содержание, и
  • оставайтесь в своей первоначально связанной линии, по существу, без обертывания.

в основном, таблицы укладываются друг под другом, когда они не могут оставаться на экране. Я бы предпочел, чтобы они были скрыты за экраном.

Я пробовал добавлять 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>
2 58
html css fluid-layout textwrapping

2 ответа:

добавить 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>
86

Это остановит перенос текста и сохранит его встроенным

.leftContent { float: left;}

.rightContent { overflow: hidden;}

0