avec des tableaux Je peux facilement avoir une rangée avec 2 colonnes, la colonne 1 est largeur variable et la colonne 2 largeur fixe en pixels et la colonne 1 redimensionne pour remplir l'espace disponible. Je suis en transition vers css et je me demande comment faire avec css .. et assurez-vous que les deux divs/colonnes restent sur la même ligne et ne pas envelopper.css disposition largeur fixe et largeur variable sur la même ligne
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; border: 0 none; }
#left { margin-right: 300px; background: yellow; }
#right { width: 300px; float: right; background: #ccc; }
</style>
</head>
<body>
<div id="wrapper">
<div id="right">Fixed</div>
<div id="left">Variable</div>
</div>
</body>
</html>
Ceci a une colonne de droite de 300 pixels et une colonne de gauche variable. Le DOCTYPE est juste là pour faire IE se comporter moins. L'utilisation d'un reset CSS est également recommandée.
Les flotteurs avec des largeurs explicites sont à peu près le moyen standard pour y parvenir de nos jours (en raison de la disposition limitée en CSS1/CSS2), vous pouvez également utiliser inline-block, mais cela ne ferait que travailler. Ne pas oublier de contenir les flottants sur le parent avec overflow: hidden et une propriété qui déclenche hasLayout comme largeur.
Pouvez-vous me donner un exemple css. Rappelez-vous que la colonne 1 doit être redimensionnée pour s'adapter à l'espace non utilisé par la colonne de largeur fixe 2 et redimensionnée également lorsque la page est redimensionnée, de sorte que les deux colonnes ne peuvent pas avoir une largeur fixe. – Tuviah
Je suppose que ce dont vous avez besoin ici est une mise en page de 2 colonnes. En théorie, vous pouvez utiliser display: table mais si vous avez besoin de supporter n'importe quelle version d'IE, ce n'est pas vraiment une option. C'est l'une des choses les plus difficiles que certains d'entre nous ont rencontrées en passant des tableaux aux CSS, mais heureusement pour vous, nous faisons cela depuis plus de 5 ans et je pense que vous pouvez trouver une solution à chaque problème. Peut-être que vous voulez vérifier cet article classique: Faux Columns
S'il vous plaît, ne vous sentez pas découragé, CSS est seulement difficile les premiers mois, et après cela, vous serez en mesure de mettre en page tout dans un très propre, simple, sémantique et manière standard.
Cet outil aide à generate liquid fixed columns facilement.
Ceci est bien parce que c'est CSS pur et facile à voir ce qui se passe – Danon
HTML
<div class="wrapper">
<div class="fixed">fixed</div>
<div class="variable">variable</div>
</div>
CSS
.wrapper {
display: flex;
align-items: stretch;
flex-flow: row nowrap;
justify-content: space-between;
}
.fixed {
min-width: 200px;
width: 200px;
}
.variable {
width: 100%;
}
Cela a fonctionné parfaitement pour moi – Danon
Je ne comprends clairement pas assez flexbox, mais je l'ai utilisé et enlevé tous attendent affichage: flex et ça fonctionne toujours! –
On dirait bien mais la colonne de gauche doit aller après la colonne de droite. Cela semble confus. Cela peut-il être fait en utilisant la position absolue et à droite, devrait-il être fait, n'est-ce pas mieux que d'utiliser des flotteurs et d'avoir à réinitialiser le flotteur? – Tuviah
Mon expérience générale avec le positionnement absolu est que cela a tendance à créer d'autres problèmes (par exemple, les valeurs changin z-index pour qu'un élément absolu flotte au-dessus des menus). Dans ce cas vous pouvez rendre la colonne droite absolue ou relative + absolue mais l'expérience me fait préférer les flotteurs, même si les éléments sont dans le «mauvais» ordre. Je ne m'inquiéterais pas trop de ça. – cletus
Cette mise en page est une bonne solution, mais crée des problèmes lorsque vous souhaitez utiliser des flottants dans la section variable principale spécifiquement lorsque vous souhaitez utiliser clear: both; –