J'ai une table de quatre colonnes, je veux que les colonnes 3 et 4 ont une largeur fixe de 200 px et col1 et Col2 pour partager 50% chacune de la largeur restante.
J'essaie quelque chose comme ça, mais je ne reçois pas les résultats souhaités. Quelqu'un peut-il aider?
https://codesandbox.io/s/ Currying-Architecture-Lw1T6? File = / src / styles.css
3 Réponses :
Cela vous aidera.
.col1,
.col2 {
width: 50%;
max-width: 0;
}
.col3,
.col4 {
min-width: 120px;
max-width: 200px;
}
J'ai essayé cela, mais la largeur de Col1 et Col2 ne vient pas égale (il y a une différence de 20 px). Quand je fais `Affichage: grille; Modèle de grille-colonnes: 1fr 1fr 200px 200px; `Cela fonctionne simplement bien, mais nous ne sommes pas disposés à utiliser la présentation de la grille en raison de la compatibilité.
J'ai encore une fois regardé votre code CSS et je n'ai pas vu le poste de grille. Si vous utilisez votre code que vous avez fourni et ma solution, vous obtenez le résultat souhaité. J'ai vérifié à nouveau.
J'ai compris pourquoi cela fonctionnait bien dans le bac à sable et non dans ma mise en œuvre réelle. J'ai changé le bac à sable pour vous donner une meilleure compréhension de ce qui se passe. Pourriez-vous s'il vous plaît vérifier - Codesandbox.io/s/OPTIMISTIC- Morning-kj5xu? File = / src / app.js
auto n'est pas une valeur valide pour max-largeur . Ok, maintenant je vais voir un exemple
Vérifier ma réponse
Vous devez utiliser une propriété CSS max-largeur dans cette case particulière dans laquelle vous souhaitez appliquer la taille fixe.
<!DOCTYPE html>
<html>
<head>
<title>FLEX</title>
<style type="text/css">
body{
font-size: 20px;
}
h1{
font-size: 24px;
text-transform: uppercase;
text-align: center;
}
.parent{
display: flex;
text-align: center;
}
.parent > * {
padding: 20px;
flex: 1 100%;
}
.child-1{
max-width: 200px; //max width
background: blue;
}
.child-2{
background: green;
max-width: 200px; //max width
}
.child-3{
background: yellow;
}
.child-4{
background: pink;
}
}
}
</style>
</head>
<body>
<h1>FLex box with 2 fixed box</h1>
<div class="parent">
<div class="child child-1"><strong>Child 2</strong><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</div>
<div class="child child-2">Child 3 <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</div>
<div class="child child-3"><strong>Child 4</strong><br> Lorem ipsum
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="child child-4">Child 5 <br> Lorem ipsum
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</div>
</body>
</html>
Ensemble min-largeur: 200px; , max-largeur: auto; Pour lesquels vous souhaitez définir une taille de 200PX fixe et pour une autre colonne, vous pouvez donner une largeur de jeu en pourcentage.
Vous pouvez
Modifiez la largeur
: 200px commemin-largeur: 200px