DIV inline-block + largeur 100%

Je ne peux pas afficher un peu de DIV dans une ligne. display: inline-block et float: left ne fonctionne pas. Mon site la largeur n'est pas fixed donc je veux qu'il soit dynamique pour s'adapter à toute la largeur de l'écran.

HTML:

<div id="all">
    <div id="a">25px</div>
    <div id="b">200px</div>
    <div id="c">
        <div id="c1">100%</div>
        <div id="c2">100%</div>
        <div id="c3">100%</div>
    </div>
    500px
</div>

CSS:

DIV {
    margin:5px;
    font-size:10px;
}

DIV#all {
    width:500px;
    border:1px dotted black;
}

DIV#a {
    display:inline-block;
    width:25px;
    height:200px;
    border:1px solid red;
    color:red;
}

DIV#b {
    display:inline-block;
    width:150px;    
    height:200px;
    border:1px solid green;
    color:green;
}

DIV#c {
    display:inline-block;
    width:auto;
    height:200px;
    border:1px solid blue;
    color:blue;
}

DIV#c1 {
    width:auto;
    border:1px dotted blue;
    color:blue;   
}

DIV#c2 {
    width:auto;
    border:1px dotted blue;    
}

DIV#c3 {
    width:auto;
    border:1px dotted blue;   
    color:blue;
}

Démonstrations En Direct:

PROBLÈME: http://jsfiddle.net/BC2d9/
RÉSOLU: http://jsfiddle.net/RAds3/ (display:table)

source d'informationauteur clavish

css table

11

Le problème avec votre tentative est la width: 100%; sur la troisième colonne div#c. 100% ici sera de 100% de son parent - qui contient tous les trois colonnes. Selon ce niveau de flexibilité que vous voulez, vous avez quelques options.

Si le site la largeur est fixe, définir une largeur fixe pour la troisième colonne.

Si vous voulez la troisième colonne pour étirer son contenu, le jeu de max-width.

Si vous voulez la troisième colonne à s'étirer pour remplir son parent, vous êtes probablement mieux avec (css) des tables.

Découvrez http://somacss.com/cols.html pour une excellente ressource sur colonne css de mise en page.

Problème est avec la troisième colonne. Vous ne pouvez pas régler la largeur à 100%. Aussi, vous devez float: left;. Voici fixes code:

<div id="all">
    <div id="a">25px</div>
    <div id="b">200px</div>
    <div id="c">
        <div id="c1">100%</div>
        <div id="c2">100%</div>
        <div id="c3">100%</div>
    </div>
    <div style="clear:both;"></div>
    500px
</div>

et CSS:

DIV {
    margin:5px;
    font-size:10px;
}

DIV#all {
    width:500px;
    border:1px dotted black;
}

DIV#a {
    float: left;
    width:25px;
    height:200px;
    border:1px solid red;
    color:red;
}

DIV#b {
    float: left;
    width:200px;    
    height:200px;
    border:1px solid green;
    color:green;
}

DIV#c {
    float: left;
    width:210px; 
    min-height:190px;
    border:1px solid blue;
    color:blue;
    padding: 5px;
}

DIV#c1 {
    width:100%;
    border:1px dotted blue;
    color:blue;
    margin: 0 0 5px 0;   
}

DIV#c2 {
    width:100%;
    border:1px dotted blue;
    margin: 0 0 5px 0;   
}

DIV#c3 {
    width:100%;
    border:1px dotted blue;   
    color:blue;
    margin: 0 0 5px 0;
}

Et aussi DÉMO

Si votre site la largeur est fixe, alors il suffit de remplacer 100% avec tous restés dans la largeur du conteneur.
Exemple: jsFiddle

Si vous voulez qu'il soit dynamique et à s'adapter à toute la largeur de l'écran, je pense qu'il n'est pas possible avec pur CSS. Je l'ai fait avec jQuery:

var containerWidth = $('#all').outerWidth();
var widthLeft = $('#a').outerWidth(true) + $('#b').outerWidth(true);
var widthRight = containerWidth - widthLeft - 20; //20px = spacing between elements

$('#c').css('width', widthRight+ 'px');
$('#c1, #c2, #c3').css('width', widthRight-10+ 'px'); //10 = padding on the right side

Modifié le CSS:

DIV#c {
    display:inline-block;
    height:200px;
    border:1px solid blue;
    color:blue;
    float: right;
}

DIV#c1 {
    border:1px dotted blue;
    color:blue;   
}

DIV#c2 {
    border:1px dotted blue;    
}

DIV#c3 {
    border:1px dotted blue;   
    color:blue;
}

Retiré width: 100% et définir float:right à #c.

Démo Live: jsFiddle

Découvrez cette mise à jour. J'espère, c'est assez bon 🙂

DIV {
margin:5px;
font-size:10px;
}

DIV#all {
    width:500px;
    border:1px dotted black;
}

DIV#a {
    display:inline-block;
    width:25px;
    height:200px;
    border:1px solid red;
    color:red;
    float:left;
}

DIV#b {
    display:inline-block;
    width:150px;    
    height:200px;
    border:1px solid green;
    color:green;
    float:left;
}

DIV#c {
    display:inline-block;
    width:277px; 
    height:200px;
    border:1px solid blue;
    padding:0 7px 0 5px;
    color:blue;
    float:left;
}

DIV#c1 {
    width:100%;
    margin:5px 0;
    border:1px dotted blue;
    color:blue; 
}

DIV#c2 {
    width:100%;
    margin:5px 0;
    border:1px dotted blue;    
}

DIV#c3 {
    width:100%;
    margin:5px 0;
    border:1px dotted blue;   
    color:blue;
}

-4

div { float:left; width:10px; height:10px; }

Aide?

Vous devez vous connecter pour publier un commentaire.