web-dev-qa-db-fra.com

CSS deux div largeur 50% sur une ligne avec saut de ligne dans le fichier

J'essaie de construire une mise en page fluide en utilisant des pourcentages en tant que largeurs. Faites donc j'ai essayé ceci:

<div style="width:50%; display:inline-table;">A</div>
<div style="width:50%; display:inline-table;">B</div>

Dans ce cas, ils ne resteront pas dans une ligne, mais si je supprime le saut de ligne entre eux, comme ceci:

    <div style="width:50%; display:inline-table;">A</div><div style="width:50%;   display:inline-table;">B</div>

alors cela fonctionne bien. Où est le problème? Comment puis-je faire quelque chose comme ça mais sans utiliser la position absolue et float.

p.s. désolé pour l'anglais . p.s.s. j'espère que je vais bien expliquer mon problème 

cssinline
45
Chris

Le problème est que quand quelque chose est en ligne, chaque whitepsace est un espace réel. Donc, cela va influencer la largeur des éléments. Je recommande d'utiliser float ou display: inline-block. (Il suffit de ne laisser aucun espace entre les divs).

Démo: http://jsfiddle.net/N9mzE/1/

<div style="width:50%; display: inline-block">A
</div><div style="width:50%; display: inline-block;">B
</div>
66
meo

Le problème est que si vous avez une nouvelle ligne entre eux dans le code HTML, vous obtenez un espace entre eux lorsque vous utilisez inline-table ou inline-block 

50% + 50% + cet espace> 100% et c'est pourquoi le second se termine en dessous du premier

Solutions:

<div></div><div></div>

ou

<div>
</div><div>
</div>

ou

<div></div><!--
--><div></div>

L'idée est de ne pas laisser d'espace entre la première balise div de fermeture et la deuxième balise d'ouverture dans votre code HTML.

PS - Je voudrais aussi utiliser inline-block au lieu de inline-table pour cela

29
Ana

Donnez à cette parent DIV font-size: 0 . Écrivez comme ceci:

<div style="font-size:0">
  <div style="width:50%; display:inline-table;font-size:15px">A</div>
  <div style="width:50%; display:inline-table;font-size:15px">B</div>
</div>
21
sandeep

Enroulez-les autour d'une div avec le CSS suivant

.div_wrapper{
    white-space: nowrap;
}
19
Tihomir Mitkov

Comment puis-je faire quelque chose comme ça mais sans utiliser la position absolue et flotter?

Outre l'utilisation de l'approche inline-block (comme indiqué dans d'autres réponses), voici d'autres approches:

1) Tables CSS ( VIOLON )

.container {
  display: table;
  width: 100%;
}
.container div {
  display: table-cell;
}
<div class="container">
  <div>A</div>
  <div>B</div>
</div>

2) Flexbox ( VIOLON )

.container {
  display: flex;
}
.container div {
  flex: 1;
}
<div class="container">
  <div>A</div>
  <div>B</div>
</div>

Pour référence, ce post CSS-astuces semble résumer les différentes approches pour y parvenir.

12
Danield
<div id="wrapper" style="width: 400px">
    <div id="left" style="float: left; width: 200px;">Left</div>
    <div id="right" style="float: right; width: 200px;">Left</div>
    <div style="clear: both;"></div>
</div>

Je sais que cette question concernait le blocage en ligne, mais essayez de consulter http://jsfiddle.net/N9mzE/1/ in IE 7 (le navigateur le plus ancien pris en charge sur lequel je travaille). Les divs ne sont pas côte à côte.

OP a déclaré qu'il ne voulait pas utiliser de flotteurs parce qu'il ne les aimait pas. Eh bien ... à mon avis, faire de bonnes pages Web qui ne paraissent pas étranges dans tous les navigateurs devrait être le maingoal, et vous le faites en utilisant des flottants.

Honnêtement, je peux voir le problème. Les flotteurs sont fantastiques.

1
OptimusCrime

inline-table est essentiellement pour la table des éléments, je suppose que ce dont vous avez vraiment besoin ici est inline-block, si vous devez utiliser inline-table de toute façon, essayez-le de cette façon:

<div style="width:50%; display:inline-table;">A</div><!--
--><div style="width:50%; display:inline-table;">B</div>
0
S.831

Désolé, mais toutes les réponses que je vois ici sont soit un hacky, soit un échec si vous éternuez un peu plus fort.

Si vous utilisez une table, vous pouvez (si vous le souhaitez) ajouter un espace entre les div, définir des bordures, remplir ...

<table width="100%" cellspacing="0">
    <tr>
        <td style="width:50%;">A</td>
        <td style="width:50%;">B</td>            
    </tr>
</table>

Vérifiez un exemple plus complet ici: http://jsfiddle.net/qPduw/5/

0
Rui Marques