Div flottante, max-largeur ne fonctionne pas

Pardonnez-moi, c'est certainement une question fréquemment posée, et certainement une solution simple. J'essaie de transformer un groupe de radio en "boutons sympas", je le fais fonctionner correctement à 95%, mais je veux que les "boutons" aient une largeur et une largeur minimum et maximum en conséquence, je suis probablement en train de dépecer, au Fiddle ci-dessous, j'essaye d'obtenir la largeur du premier "bouton" à développer pour accommoder le contenu long. Des pensées?Div flottante, max-largeur ne fonctionne pas

Merci d'avance!

Fiddle: [https://jsfiddle.net/charlesread/0bpvrcpj/6/][1]

main { 
 
    width: 800px; 
 
    margin:auto; 
 
} 
 

 
div#radioContainer { 
 
    text-align:center; 
 
    margin: 10px; 
 
} 
 

 
div#radioContainer label { 
 
    display:inline-block; 
 
} 
 
div#radioContainer label input[type=radio] { 
 
    visibility: hidden; 
 
    position: absolute; 
 
} 
 

 
div#radioContainer label input[type=radio] + div { 
 
    width:100px; 
 
    max-width:200px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background-color: #ddd; 
 
    float: left; 
 
    position:relative; 
 
    transition: background-color 0.5s; 
 
} 
 

 
div#radioContainer label input[type=radio] + div p { 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
div#radioContainer label input[type=radio]:checked + div { 
 
    background-color: #bbb; 
 
}

<main> 
 
<div id="radioContainer"> 
 
<label><input type="radio" name="a"><div><p>One twothreefourfivesixseven</p></div></label> 
 
<label><input type="radio" name="a"><div><p>One</p></div></label> 
 
<label><input type="radio" name="a"><div><p>One</p></div></label> 
 
</div>

Source

2017-05-20 charlesread

Ne pas utiliser <p></p> tags. Au lieu de cela, utilisez un autre div pour le texte. Vérifiez le CSS de l'extrait ci-dessous.

main { 
 
    width: 800px; 
 
    margin: auto; 
 
} 
 

 
div#radioContainer { 
 
    text-align: center; 
 
    margin: 10px; 
 
} 
 

 
div#radioContainer label { 
 
    display: inline-block; 
 
} 
 

 
div#radioContainer label input[type=radio] { 
 
    visibility: hidden; 
 
    position: absolute; 
 
} 
 

 
div#radioContainer label input[type=radio]+div { 
 
    min-width: 100px; 
 
    max-width: 200px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background-color: #ddd; 
 
    float: left; 
 
    position: relative; 
 
    transition: background-color 0.5s; 
 
} 
 

 
div#radioContainer label input[type=radio]:checked+div { 
 
    background-color: #bbb; 
 
} 
 

 
.inner { 
 
    top: 50%; 
 
    position: relative; 
 
    transform: translateY(-50%); 
 
}

<main> 
 
    <div id="radioContainer"> 
 
    <label><input type="radio" name="a"><div><div class="inner">This is a very long text</div></div></label> 
 
    <label><input type="radio" name="a"><div><div class="inner">Thisisanotherlongtext...............</div></div></label> 
 
    <label><input type="radio" name="a"><div class="outer"><div class="inner">One</div></div></label> 
 
    </div> 
 
</main>

Source

2017-05-20 19:21:34 Nimish

Magnifique! Quelle solution simple, pourriez-vous expliquer pourquoi le simple changement fait une telle différence? Merci beaucoup! – charlesread

@charlesread Je ne connais pas la raison exacte, mais j'ai remplacé les balises p par div parce que div prend autant d'espace que vous écrivez du contenu et c'est ce que vous voulez. DIV est un conteneur de niveau de bloc générique qui peut contenir n'importe quel autre élément de bloc ou en-ligne, y compris d'autres éléments DIV, alors que P doit envelopper les paragraphes (texte). DIV en tant qu'élément de regroupement. Vous placez des éléments dans un élément DIV afin de pouvoir définir leurs alignements. Attendu que "p" sert simplement à créer un nouveau paragraphe. – Nimish

S'il vous plaît vérifier, Vous pouvez étendre manuellement la largeur avec l'ensemble d'une classe à la division spécifique.

main { 
 
    width: 800px; 
 
    margin:auto; 
 
} 
 

 
div#radioContainer { 
 
    text-align:center; 
 
    margin: 10px; 
 
} 
 

 
div#radioContainer label { 
 
    display:inline-block; 
 
} 
 
div#radioContainer label input[type=radio] { 
 
    visibility: hidden; 
 
    position: absolute; 
 
} 
 

 
div#radioContainer label input[type=radio] + div { 
 
    width:100px; 
 
    max-width:200px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background-color: #ddd; 
 
    float: left; 
 
    position:relative; 
 
    transition: background-color 0.5s; 
 
} 
 

 
div#radioContainer label input[type=radio] + div p { 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
div#radioContainer label input[type=radio]:checked + div { 
 
    background-color: #bbb; 
 
} 
 

 
#radioContainer .expand{ 
 
width: 250px!important; 
 
}

<main> 
 
<div id="radioContainer"> 
 
<label><input type="radio" name="a" ><div class="expand"><p>One twothreefourfivesixseven</p></div></label> 
 
<label><input type="radio" name="a"><div><p>One</p></div></label> 
 
<label><input type="radio" name="a"><div><p>One</p></div></label> 
 
</div>

Source

2017-05-20 05:43:34 codesayan

Merci pour l'effort, mais le contenu et le nombre de boutons seront dynamiques, donc je les besoin d'ajuster automatiquement. – charlesread

Div flottante, max-largeur ne fonctionne pas

Répondre

Questions connexes