web-dev-qa-db-fra.com

Faire un div inline-block prendre 100% de la largeur restante

J'ai 3 div blocs dans un autre div.

Ce que je voulais faire est de les mettre en ligne, mais les 2 premiers blocs div doivent prendre une largeur en fonction de leur contenu et les derniers div occupent l'espace restant.

<div class="container">
    <div class="red">Red</div>
    <div class="green">Green</div>
    <div class="blue">Blue</div>
</div>

J'essaie d'éviter l'utilisation de largeurs fixes car je dois l'utiliser dans un design réactif.

Comment puis-je rendre la div bleue dans ce violon prendre l'espace disponible restant de son parent et réagir si l'écran est redimensionné?

htmlcsshtml5css3responsive-design
14
Diego

Je pense que si vous ne souhaitez pas spécifier de largeur de pixel ou de pourcentage et rendre les conteneurs rouges et verts aussi larges que leur contenu, vous devez les envelopper dans leur propre conteneur, nommé .left ci-dessous:

<div class="container">
    <div class="left">
        <div class="red">Red</div>
        <div class="green">green</div>
    </div>
    <div class="blue">blue</div>
</div>

Si vous placez maintenant .left à gauche et que vous ajoutez également .left div à gauche, vous n'avez plus besoin de spécifier d'éléments inline-block. Le conteneur bleu va simplement occuper tout l’espace disponible jusqu’à la fin du .container.

.left {
    float: left;
}

.left div {
    float: left;
}

Fiddle

Modifier

Drôle moi, le conteneur .left n’est évidemment pas nécessaire tant que vous ajoutez simplement float: left à vos blocs rouges et verts, comme @Ennui l’a dit plus haut dans les commentaires :) 

Violon mis à jour

6
Elise

float: left le rouge et le vert et le bleu ont width: clac(100% - 100px)

.blue {
    width: calc(100% - 100px);
}

http://jsfiddle.net/6kLVn/190/

8
URL87

Changez votre css en ceci:

.container{border: 2px solid black; padding: 5px; position: relative; width: 100%;}

.container div {height: 20px;}

.red{border: 2px solid red; display: block; float: left;}

.green{border: 2px solid green; display: block; float: left;}

.blue{border: 2px solid blue;}

Testé en Chrome

MODIFIER

Silly moi, c'est le jsfiddle forké: http://jsfiddle.net/BWRVk/

2
Agustin Meriles

Si vous voulez qu'il soit réactif, donnez divs% widths.

http://jsfiddle.net/feitla/6kLVn/6/

.container div {height: 20px;}

.red{border: 2px solid red;width:10%;display:inline;}

.green{border: 2px solid green;width:10%; display: inline;}

.blue{border: 2px solid blue;display:inline-block;width:80%;}
1
feitla

Je suppose que tout est basé sur ce que vous voulez que vos images soient. Je viens d'utiliser% sur les images pour montrer qu'elles peuvent être redimensionnées en fonction d'un design réactif. http://jsfiddle.net/6kLVn/7/

HTML

<div class="container">
    <div class="red">Red</div>
    <div class="green">green</div>
    <div class="blue">blue</div>
</div>

CSS

.container{border: 2px solid black; padding: 5px; position: relative; margin:0px; width: 100%;}

.container div {height: 20px; display: inline-block; padding:0px; margin:0px;}

.red{border: 2px solid red; width:31%; }

.green{border: 2px solid green;width:31%;}

.blue{border: 2px solid blue;width:31%;}
1
Keith