web-dev-qa-db-fra.com

2 divs alignés côte à côte, comment faire pour que la largeur de remplissage des divs soit correcte à 100%?

Je me demande quelle est la meilleure façon de s'y prendre ...

J'ai 3 divs:

  • un div#container avec width=100%; qui contient 2 divs intérieure

  • un div#inner_left avec width changeant dynamiquement, mais pas plus large que 200px (tiendra une image de produit)

  • un div#inner_right où la largeur doit remplir le reste de l'espace dans le conteneur (contiendra du texte pour décrire le produit montré)

    #container {
   width:100%
}

#inner_left {
    display:inline-block:
    max-width:200px;
}

#inner_right {
    display:inline-block;
    width:100%; 
}

Le problème est que le div#inner_right crée un saut de ligne et occupe toute la largeur. Comment puis-je les aligner côte à côte, avec la droite div représentant la largeur prise par la gauche div (qui change dynamiquement?). J'ai réussi à trouver d'autres solutions, mais je cherche une solution propre ...

Toute aide pour un CSS noob est très appréciée!

htmlfillalignmentcss
39
thedeepfield

Jetez un oeil à " layouts liquid ", il peut décrire ce dont vous parlez.

Vous cherchez probablement celui-ci .

Dans votre exemple, essayez de définir votre affichage en ligne. Cependant, techniquement, vous ne pourrez pas utiliser d'éléments de niveau bloc, regardez donc les liens que j'ai postés ci-dessus. :)

Le problème de la définition de la largeur à 100% si vous utilisez des éléments flottants est qu’il est considéré comme représentant 100% du conteneur. Par conséquent, cela ne fonctionnera pas non plus, car la valeur 100% inclut la largeur du div de gauche.

Edit: Here est l'exemple de l'autre réponse, je l'ai modifiée pour inclure le code html/css de l'exemple de site ci-dessus par souci de simplicité.

Je vais aussi l'inclure ci-dessous:

HTML

<div id="contentwrapper">
    <div id="contentcolumn">
        <div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
    </div>
</div>
<div id="leftcolumn">
    <div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>

CSS

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
17
Richard Marskell - Drackir

Je n'ai pas vraiment vu une bonne solution dans les réponses ici. Donc, je vais partager le mien. 

La meilleure façon de procéder consiste à utiliser l'option table-cell en CSS. Une chose importante à ajouter est une «largeur minimale» à l'élément qui a une largeur en pixels.

Exemple:

<div id="left">
    Left
</div>
<div id="right">
    right
</div>

CSS:

#left {
    display: table-cell;
    min-width: 160px;
}
#right {
    display: table-cell;
    width: 100%;
    vertical-align: top;
}
64
w00

Ceci peut être accompli en utilisant Flex-Box, qui a été introduit avec CSS3 et selon Puis-je utiliser est multi-navigateur.

.container { 
  display: flex; 
}

.left {
  width: 100px; /* or leave it undefined */
}

.right { 
  flex-grow: 1;
}

/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}
<div class="container">

  <div class="left">100px</div>
  <div class="right">Rest</div>
  
</div>

3
arcs

Donc, même si je voulais faire cela avec CSS uniquement, j'ai fini par utiliser uniquement des tableaux ...

2
thedeepfield

Utilisez flottant:

#container{
width:100%
}

#inner_left{
float:left;
max-width:200px;
}

#inner_right{
float:left;
width:100%; 
}

Edit: lisez ceci, c’est un joli petit guide: quirksmode

0
Damien Pirsy

Ceci est basé sur la réponse de @ w00. +1 ami.

Ma situation était lorsque je voulais montrer quelques icônes à côté d'une étiquette. J'utilise la classe fluid pour ce qui est l'endroit où le nowrap entre en jeu. C'est pour que les icônes apparaissent sur la même ligne.

.sidebyside-left-fixed, .sidebyside-right-fixed
{
    display: table-cell;
    width: 100%;
}

.sidebyside-left-fluid , .sidebyside-right-fluid
{
    display: table-cell;
    vertical-align: top;
    white-space: nowrap;
}
0
Valamas

Voici une méthode facile pour y parvenir, et c'est quelque chose qui est assez souvent nécessaire. Il a également été testé pour fonctionner avec tous les navigateurs, y compris les très anciens (laissez-moi savoir si ce n'est le cas sur aucun).

Lien vers un échantillon: https://jsfiddle.net/collinsethans/jdgduw6a/

Voici la partie HTML:

<div class="wrapper">
    <div class="left">
        Left Box
    </div>

    <div class="right">
        Right Box
    </div>

</div>

Et le SCSS correspondant:

.wrapper {
    position: relative;
}

$left_width: 200px;
.left {
    position: absolute;
    left: 0px;
    width: $left_width;
}
.right {
    margin-left: $left_width;
}

Si vous n'utilisez pas de pré-processeur CSS, remplacez le $ left_width par votre valeur (200px ici).

Crédit: Ceci est basé sur http://htmldog.com/examples/pagelayout2/ . Il en existe plusieurs autres utiles.

0
Ethan

vous devez fournir position: style absolu à la fois à votre div

0
tristan625