Comment empêcher les divs inline-block de s'enrouler ?

Question

jsFiddle Démo

Je veux le div pour :

• Emballez leur contenu.
• Restent dans leur ligne associée à l'origine, essentiellement sans enveloppement.

En gros, les tableaux s'empilent les uns sur les autres, alors qu'ils ne peuvent pas rester à l'écran. Je préférerais qu'elles soient cachées hors écran.

J'ai essayé d'ajouter overflow: hidden; au style de mise en page principal. Je ne veux pas fixer une largeur pour chaque style de mise en page. div . Le contenu doit être intégré.

.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

Ajouter white-space: nowrap; à votre .layout déclaration de style.

Cela fera exactement ce dont vous avez besoin : empêcher les divs de s'enrouler.

Regardez le

jsFiddle Démo

ou exécutez le code suivant plein écran et le redimensionner :

.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

Cela empêchera le texte de s'enrouler et le gardera en ligne.

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