Empêcher les div inline-block de l’emballage

jsfiddle démo

Je veux que les divisions:

  • envelopper leur contenu, et
  • restr dans leur ligne d’origine, essentiellement sans emballage.

Fondamentalement, les tables s’emstacknt les unes sur les autres, quand elles ne peuvent pas restr à l’écran. Je préférerais qu’ils se cachent hors de l’écran.

J’ai essayé d’append un overflow: hidden; au style de mise en page principal. Je ne veux pas fixer une largeur pour chaque div. Il doit s’adapter au contenu

 .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; } 
 
header 1 header 2 header 3 header 4
data 1 data 2 data 3 data 4
data 1 data 2 data 3 data 4
data 1 data 2 data 3 data 4
header 1 header 2 header 3 header 4
data 1 data 2 data 3 data 4

header 1 header 2 header 3 header 4
data 1 data 2 data 3 data 4
header 1 header 2 header 3 header 4
data 1 data 2 data 3 data 4
header 1 header 2 header 3 header 4
data 1 data 2 data 3 data 4

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

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

    Regarder le

    jsfiddle démo

    ou exécutez le code plein écran suivant et redimensionnez-le:

     .layout { white-space : nowrap; /* this does the sortingck */ 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; } 
     
    header 1 header 2 header 3 header 4
    data 1 data 2 data 3 data 4
    data 1 data 2 data 3 data 4
    data 1 data 2 data 3 data 4
    header 1 header 2 header 3 header 4
    data 1 data 2 data 3 data 4

    header 1 header 2 header 3 header 4
    data 1 data 2 data 3 data 4
    header 1 header 2 header 3 header 4
    data 1 data 2 data 3 data 4
    header 1 header 2 header 3 header 4
    data 1 data 2 data 3 data 4

    Cela arrêtera le retour à la ligne et le maintiendra en ligne

    .leftContent {float: left; }

    .rightContent {overflow: masqué; }