CSS Div 100% avec flotteur: gauche

Agrh, CSS - le fléau de ma vie. Quelqu'un peut-il aider ici?CSS Div 100% avec flotteur: gauche

J'essaie d'obtenir la mise en page div suivante:

******************************************************************************* 
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc* 
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc* 
*******************************************************************************

mes styles regarder actuellement comme ceci:

#container { 
height:50px; 
} 

#a { 
float:left; 
width:50px; 
height:50px; 
} 

#b { 
float:left; 
width:50px; 
height:50px; 
} 

#c { 
float:left; 
width:100%; 
height:50px; 
} 

<div id="container"> 
    <div id="a" /> 
    <div id="b" /> 
    <div id="c" /> 
</div>

Mais c'est à l'origine ce qui suit pour se produire (div c tombe au-dessous de la autres):

******************************************************************************** 
*aaaaaaaaaa bbbbbbbbbbbb              * 
*aaaaaaaaaa bbbbbbbbbbbb              * 
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc* 
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc* 
********************************************************************************

Qu'est-ce qui doit être modifié pour résoudre ce problème? Merci.

Informations complémentaires:

a et b doit avoir des largeurs de pixels fixes.
Ceci est un exemple simplifié - en réalité, les divs ont des frontières qui ne doivent pas se chevaucher.

Source

2010-11-18 UpTheCreek

double possible de [Expand div largeur max lorsque le flotteur: gauche est réglé] (http://stackoverflow.com/questions/1017880/expand-div-to-max -width-when-floatleft-is-set) –

Juste ne pas float le dernier div puis ça va marcher. Enlevez également la largeur de 100% et donnez-lui une marge gauche de la largeur de vos deux divs de largeur fixe. Cela devrait ressembler à ceci:

http://jsfiddle.net/YMQbh/

Source

2010-11-18 08:13:52 meo

Merci. Ce jsfiddle est un outil sympa! – UpTheCreek

Merci pour cette réponse simple et pourtant bien expliquée –

d'abord, il est préférable d'avoir un conteneur avec une largeur fixe. La chose suivante est que 100% de "c" est relatif au conteneur, donc il s'étendra sur toute la largeur du conteneur.

Mise à jour: Pour le dire plus précis: le c div n'a pas besoin d'un flottant de largeur. Comme d'autres l'ont déjà dit: Une div (en tant qu'élément blocklevel) s'étend sur elle-même sur toute la largeur.

Source

2010-11-18 07:16:59 scheffield

Merci. Donc, il n'y a aucun moyen d'étendre la troisième div pour remplir l'espace restant? – UpTheCreek

sa venue: http://www.html5rocks.com/tutorials/flexbox/quick/ –

malheureusement, nous devrons attendre ou c'est-à-dire pour rattraper –

Je pense qu'omettre simplement l'attribut width du tout pour le div c devrait faire le travail. Normalement, les DIVs couvriront toute la largeur qu'ils peuvent obtenir. Cet exemple a fonctionné pour moi:

<html> 
<head> 
    <style type="text/css"> 
     #a { 
      width: 50px; 
      height: 50px; 
      float: left; 

      background-color: #ffff00; 
     } 

     #b { 
      width: 50px; 
      height: 50px; 
      float: left; 
      background-color: #ff00ff; 
     } 

     #c { 
      height: 50px; 
      background-color: #00ffff; 
     } 
    </style> 
</head> 
<body> 
    <div id="a"></div> 
    <div id="b"></div> 
    <div id="c"></div> 
</body> 
</html>

Source

2010-11-18 07:22:38 philgiese

Sans et largeur sur c, il se dilate juste assez pour contenir le contenu - peut-être parce que c'est flottant: gauche? – UpTheCreek

Yapp. Juste laisser cela comme mon exemple l'a montré. Et au fait. Utilisez Firebug! Là, vous pouvez facilement ajouter/supprimer/désactiver/modifier les propriétés CSS lors de l'affichage de la page. De cette façon, je découvre la plupart de mes erreurs CSS. – philgiese

Mais sans le flotteur, les frontières sont foirées. – UpTheCreek

#container { 
float:left 
width:100% /*for liquid layout*/ 
width:960px /*fixed layout*/ 
height:50px; 
} 

#a { 
float:left; 
width:50px; 
/*or*/ 
width:5%; 
height:50px; 
} 

#b { 
float:left; 
width:50px; 
/*or*/ 
width:5%; 
height:50px; 
} 

#c { 
float:left; 
width:90%; 
/*or*/ 
width:860px; /* subtract the sum of the container a+b from the container c. */ 
height:50px; 
} 

<div id="container"> 
    <div id="a" /> 
    <div id="b" /> 
    <div id="c" /> 
</div>

Si vous ajoutez padding, marge droite ou à gauche, ou les deux, vous devez les soustraire de la largeur totale aussi.

Source

2010-11-18 07:23:44 chchrist

J'aurais dû ajouter dans la question, que a et b doivent avoir des largeurs de pixels. – UpTheCreek

C'est pourquoi j'ai ajouté deux valeurs (en px et en%) – chchrist

Plutôt que de flotter #c, je lui donnerais un margin-left et laisser le width comme automatique.

Source

2010-11-18 07:28:08

J'ai essayé cela, mais malheureusement sans le flotteur sur c, les frontières se chevauchent avec a et b causant des problèmes. – UpTheCreek

Vous pouvez également définir une marge sur les marges '# b' et tweak' # b' et '# c' selon vos frontières. –

Ici, vous allez:

<div style='width:200px;background:yellow;float:left'>One</div> 
<div style='width:200px;background:orange;float:left'>Two</div> 
<div style='background:khaki'>Three</div>

pouvez régler One et Two largeurs au besoin. Testé en travaillant dans FF 3.6, IE 8, Safari 4.0, Chrome 3.195.

EDIT

Maintenant, avec les frontières:

<div style='width:200px;background:yellow;float:left;border:1px solid red;margin:0 -1px;'>One</div> 
<div style='width:200px;background:orange;float:left;border:1px solid green;margin:0 -1px'>Two</div> 
<div style='background:khaki;border:1px solid black;margin-left:400px'>Three</div>

EDIT 2

frontières ne se chevauchant pas (et des couleurs contrastées), de la presse à chaud:

<div style='width:200px;background:yellow;float:left;border:1px solid red;margin:0 -1px;'>One</div> 
<div style='width:200px;background:orange;float:left;border:1px solid blue;margin:0 -1px 0 1px'>Two</div> 
<div style='background:purple;border:1px solid orange;margin-left:403px'>Three</div>

Source

2010-11-18 07:29:45 Ben

Ensuite, les frontières de c interfèrent avec les frontières de a et b. – UpTheCreek

Bordures? Où sont les frontières dans votre exemple? Mais donnez-moi une minute, je vais mettre dans les frontières. – Ben

Oui, désolé, je montrais un exemple simplifié - je ne savais pas qu'ils étaient importants jusqu'à ce que j'essaie d'enlever le flotteur. – UpTheCreek

Ne faites pas flotter la div "c". En tant qu'élément de bloc, il occupera naturellement toute la largeur horizontale de la fenêtre.

Ce que vous voulez faire est d'utiliser simplement une marge sur le côté gauche de « c » pour donner « une » chambre et « b » à côté de « c »

Essayez ceci:

#container { 
height:50px; 
} 

#a { 
float:left; 
width:50px; 
height:50px; 
border: 1px #000 solid; /* takes up 2px width - 1px on either side */ 
} 

#b { 
float:left; 
width:50px; 
height:50px; 
border: 1px #000 solid; /* takes up 2px width - 1px on either side */ 
} 

#c { 
/* 2x 50px wide div elements = 100 px 
* + 2x 1px left borders  = 2 px 
* + 2x 1px right borders  = 2 px 
*        ======= 
*        104 px 
*/ 
margin-left: 104px; 
}

Source

2010-11-18 07:31:00 AgentConundrum

Sans le flotteur, les bordures de c chevauchent les limites de a et b - cela pose des problèmes. – UpTheCreek

@UpTheCreek: les bordures font partie de la largeur totale d'un élément. Vous devez les prendre en compte lors de la détermination de votre marge-gauche sur #c. Par exemple, si #a et #b ont chacun une bordure de 1px, et en supposant aucune marge/remplissage qui ajouterait aussi de la largeur, leur largeur totale serait 50px pour le contenu, et 2px pour la bordure (1px gauche + 1px droite), donnant leur une largeur totale de 52px chacun, donC#c aurait besoin d'avoir une marge de gauche de 104px, plutôt que le 100px je suppose que vous avez essayé. – AgentConundrum

Cette réponse (http://stackoverflow.com/questions/4208939/padding-on-floating-elements/4209218#4209218) J'ai écrit plus tôt devrait éclaircir les choses un peu. – AgentConundrum

CSS Div 100% avec flotteur: gauche

Répondre

Questions connexes