J'ai besoin d'une mise en page à deux colonnes , comme un tableau, où je ne sais pas dans quelle mesure les colonnes sont larges.

J'ai besoin que la colonne de droite soit aussi large que son contenu (pas de retour à la ligne), et la colonne de gauche à prendre l'espace restant, en faisant un retour à la ligne s'il n'y a pas d'espace disponible.

La colonne de droite est correcte, tandis que la div mainInfos de gauche va au-dessus si le contenu en a besoin.

Je veux que les colonnes soient côte à côte. Que puis-je faire pour atteindre ce résultat?

Le conteneur a une largeur fixe. Je voudrais ne pas utiliser jquery.

#post {
	overflow: hidden;
	width: 400px;
	border: solid 1px;
}
#post .mainInfos {
	overflow: hidden;
}
#post .details {
	float: right;
}
<div id="post">
	<div class="mainInfos">really really long content that should be wrapped and should be all at the left of "small content", on the same line</div>
	<div class="details">small content</div>
</div>
1
cdarwin 26 janv. 2017 à 19:11

4 réponses

Meilleure réponse

Vous pouvez utiliser une flexbox pour cela:

  1. Ajouter display: flex au conteneur post

  2. Ajoutez white-space: nowrap au details pour éviter qu'il s'enroule

  3. Ajoutez flex: 1 au mainInfos pour lui permettre de prendre l'espace restant.

Voir la démo ci-dessous:

#post {
  display: flex;
  width: 400px;
  border: solid 1px;
}
#post .mainInfos {
  flex: 1;
}
#post .details {
  white-space: nowrap;
}
<div id="post">
  <div class="mainInfos">really really long content that should be wrapped and should be all at the left of "small content", on the same line</div>
  <div class="details">small content</div>
</div>
1
kukkuz 26 janv. 2017 à 16:18

Veuillez vérifier l'exemple. Je pense que cela vous aidera.

#post {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 400px;
  -moz-box-flex: 0;
  -ms-flex: 0 0 400px;
  flex: 0 0 400px;
  overflow: hidden;
  width: 400px;
  border: solid 1px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  padding: 5px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#post .mainInfos,
#post .details {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #f6f6f6;
  border: 1px solid #989898;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 10px;
}
<div id="post">
            <div class="mainInfos">
                really really long content that should be wrapped and should be all at the left of "small content", on the same line
                <br />
                really really long content that should be wrapped and should be all at the left of "small content", on the same line
            </div>
            <div class="details">
                small content<br />
                small content<br />
                small content<br />
                small content<br />
                <br />
                really really long content that should be wrapped and should be all at the left of "small content", on the same line
            </div>
        </div>
0
Rahul 26 janv. 2017 à 16:27

Une alternative à flexbox qui fonctionne dans les nouveaux et anciens navigateurs consiste à utiliser display:table-cell sur les div internes:

#post {
  overflow: hidden;
  width: 400px;
  border: solid 1px;
}
#post > div {
  display: table-cell;
}
#post .details {
  white-space: nowrap;
}
<div id="post">
  <div class="mainInfos">really really long content that should be wrapped and should be all at the left of "small content", on the same line</div>
  <div class="details">small content</div>
</div>
2
j08691 26 janv. 2017 à 16:22

Utilisez Flexbox, retirez d'abord le flotteur: à droite dans la colonne de droite. Ajouter à l'élément parent (#post) ceci,

display: flex

Documentation ici

0
David Ortiz 26 janv. 2017 à 16:17