web-dev-qa-db-fra.com

Comment forcer les divs en ligne à rester sur la même ligne?

J'essaie de faire une mise en page à trois colonnes. J'aimerais que la largeur des colonnes de gauche et de droite soit aussi large que le contenu de leurs enfants. J'aimerais que la colonne centrale s'agrandisse pour occuper l'espace restant.

J'essaie ce qui suit (aperçu, lien jsfiddle inclus ci-dessous):

#colLeft {
  display: inline;
  float: left;
}
#colCenter {
  float: left;
  display: inline;
  overflow: none;
  white-space: nowrap;
}
#colRight {
  display: inline;
  float: right;
}

<div id="parent" style="width:100%">
  <div id="colLeft">left</div>
  <div id="colCenter">Some really long text in the center. Some really long text in the center.</div>
  <div id="colRight">right</div>
</div>

violon: http://jsfiddle.net/5kszQ/

mais la colonne centrale pousse la colonne de droite en dessous quand son contenu est trop long. J'aimerais que les trois colonnes soient en ligne et que la colonne centrale soit réduite au besoin. Voici ce que je viens de dire:

enter image description here

je voudrais plutôt:

enter image description here

Merci pour toute aide

htmlcssword-wrap
42
user1219278

Si vous êtes ouvert à certaines modifications HTML, cela devrait vous donner exactement ce que vous voulez:

<div id="parent" style="width:100%">  
  <div id="colLeft">left</div>
  <div id="colwrap">
      <div id="colRight">right</div>
      <div id="colCenter">Some really long text in the center. Some really long text in the center.</div>  
    </div>
</div>

et css être:

html, body {
  margin: 0px;
  padding: 0px;
}
#parent {
  background-color: #eee;
  height: 48px;
}
#colLeft {
  background-color: #ff8b8b;
  height: 48px;
  float: left;
}
#colwrap{
    overflow:hidden;
    background-color: orange;      
}
#colCenter {
  height: 48px;  
}
#colRight {
  background-color: #c3d0ff;
  height: 48px;
  float: right;
}

jsFiddle: http://jsfiddle.net/gajbhiye/ZX97K/ J'espère que cela vous aidera.

18
Dinesh Gajbhiye

Voici une méthode utilisant inline-block pour la gauche et le milieu et position:absolute pour le bon élément.

Example

jsFiddle

[~ # ~] html [~ # ~] 

<div id="parent" style="width:100%">
    <div id="colLeft">left</div><!--
    --><div id="colCenter">Some really long text in the center. Some really long text in the center.</div>
    <div id="colRight">right</div>
</div>

[~ # ~] css [~ # ~] 

html, body {
    margin: 0px;
    padding: 0px;
}
#parent {
    background-color: #eee;
    height: 48px;
    position:relative;
    overflow:hidden;
    white-space: nowrap;
}
#colLeft {
    background-color: #ff8b8b;
    height: 48px;
    display: inline-block;
}
#colCenter {
    background-color: orange;
    height: 48px;
    display: inline-block;
    overflow: hidden;
}
#colRight {
    background-color: #c3d0ff;
    height: 48px;
    display: inline;
    float: right;
    position:absolute;
    top:0;
    right:0;
}

Puisqu'il repose sur inline-block, il y a un commentaire entre les <div>s pour supprimer l’espacement illustré dans cette image:

Ugly spacing

débordement de texte: Ellipsis

Pour ce faire en utilisant text-overflow:Ellipsis vous aurez peut-être besoin de recourir à JavaScript, voici une solution possible ( jsFiddle ).

Ellipsis using JavaScript

window.onresize = updateDimensions;

function updateDimensions() {
    var parent = document.getElementById('parent');
    var left = document.getElementById('colLeft');
    var right = document.getElementById('colRight');
    var middle = document.getElementById('colCenter');

    middle.style.width = (parent.offsetWidth - right.offsetWidth - left.offsetWidth)  + 'px';
}
20
Daniel Imms

Tromper le navigateur en disant que tout s’intègre parfaitement sur une seule ligne en ajoutant des marges importantes aux éléments central et droit, et qu’il faut compenser cela par un positionnement relatif. Voir violon mis à jour.

Balisage: reste intact.

Style:

#parent {
  background-color: #eee;
  height: 48px;
  overflow: hidden;
}
#colLeft {
  background-color: #ff8b8b;
  height: 48px;
  float: left;
}
#colCenter {
  background-color: orange;
  height: 48px;
  float: left;
  margin-left: -2000px;
  position: relative;
  left: 2000px;
}
#colRight {
  background-color: #c3d0ff;
  height: 48px;
  float: right;
  margin-right: -2000px;
  position: relative;
  left: -2000px;
}
3
NGLN

UTILISEZ LES POURCENTAGES - Vous pouvez conserver une mise en page propre si vous ne pensez qu’aux pourcentages. Un float ou un inline-block ne passera jamais à la ligne suivante s'il dispose de suffisamment d'espace sur la page.

Les éléments extérieurs ont une largeur de 20% et le milieu une largeur de 50%. Cela ajoute jusqu'à 90% de la page afin de ne pas déborder. Vous pouvez obtenir plus de précision pour remplir la page si c'est ce que vous souhaitez, mais vous devez faire attention au remplissage et aux marges qui risquent de gâcher votre mise en page.

Voici un fidde: https://jsfiddle.net/VVarPiglet/Lsy2rquk/

<div class="parent">
<div class="subParenet">
<div class="left outer inlineBlock">
    <img class="image" src="http://alexoliveira.me/Hawaii/images/chevron- left.png" />
</div>
<div class="middle inlineBlock"></div>
<div class="right outer inlineBlock">
  img class="image" src="http://alexoliveira.me/Hawaii/images/chevron-left.png" />
</div>
</div>
</div>

CSS

.inlineBlock{
  display: inline-block;
}
.middle{
  background: blue;
  width: 50%;
  height: 215px;
}
.image{
  width:100%;
}
.outer{
  background: red;
  width: 20%;
}
.subparent{
  display: inline-block;
  width:100%;
}
1
Elijah Tate

Juste essayer ceci

<html>
<head>
    <style type="text/css">
        #parent {
          Word-break:break-all;
        }
        #colLeft {
          float:left;
          max-width: 5%;
        }
        #colCenter {
          float:left;
          max-width: 90%;
        }
        #colRight {
          float: right;
          max-width: 5%;
        }
    </style>
</head>
<body>
    <div id="parent" style="width:100%">
      <div id="colLeft">leftawefawefawefawef</div>
      <div id="colCenter">Some really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjl</div>
      <div id="colRight">rightaewfaewfawefawef</div>
    </div>
</body>
0
brian