ok je m'excuse s'il s'agit d'une répétition - mais je n'ai pas pu trouver de réponses de travail n'importe où.
Je veux avoir deux divs (50% de largeur chacun) côte à côte ... donc une gauche et une droite - à l'intérieur d'un contenu div Je veux qu'ils disposent de min-larthes à 300px et une fois que la page est inférieure à 600px (qui se situe lorsque les deux divs atteindront leurs mines), je veux diviser pour envelopper .. donc un sur le dessus de l'autre.
J'ai essayé de le faire ici: violon mais j'ai des problèmes.
Voici exactement ce que je veux:
(voir la photo ci-dessous) .
4 Réponses :
Vous faites du mal pour vous-même! Cela peut être fait rapidement et facilement avec permet d'expliquer le code: p> Maintenant pour l'intérieur 50% éléments: P> inline-block code> s. Avoir une belle JSFIDDLE . .left, .right{
display: inline-block; /* This will treat these divs like a text element.
This will work with the parent's "text-align: center" to center the element. */
min-width: 300px;
width: 50%;
font-size: 16px; /* Explained below */
vertical-align: text-top; /* Explained below */
}
Je pense que c'est une approche viable, avec la contrariété mineure que vous devez entrer et réaligner le texte des éléments internes vers gauche si vous voulez du texte régulier là-bas. Mais comme vous l'avez dit, il est bon d'avoir plusieurs façons présentées, d'autant plus que le reste du contenu du site pourrait rendre l'une ou l'autre approche impossible. Et +1 pour démontrer la solution de contournement pour la taille de la police
De toute évidence, cette réponse fonctionne. Ma question pour vous, car je suis nouveau à coder, c'est comment puis-je faire partie du contenu rose uniquement aussi grand que le contenu qu'il contient? (Probablement une question stupide ...) @alexanderlozada
@ user3558711 - Oups, mon mauvais. Il suffit de supprimer la propriété hauteur à partir du conteneur, et il deviendra aussi grand que le contenu. Jsfiddle - jsfiddle.net/mzbku/8
http://jsfiddle.net/emn178/mzbku/7/
i Ajouter une requête médiatique, ce devrait être ce que vous voulez. gauche et droit pourrait avoir la même mise en page, donc j'ajouterais un bloc de classe .
Pour utiliser flotteur: gauche et largeur: 50% , il devrait fonctionner.
Mais vous devez calculer comment définir la taille.
Cela ne change pas de manière réactive la largeur à 50% car l'élément est float, rendant le 50% de la valeur superflue.
Vous avez essayé de mettre en œuvre la même requête multimédia 750px que j'ai donnée dans ma réponse 3 minutes après l'avoir posté, mais vous avez cassé votre exemple car il jette maintenant une barre de défilement au lieu de montrer l'élément violet lorsque la requête des médias est appliquée. Je vous donnerai -0,25 pour essayer de passer cela comme votre propre pensée, et -0,75 pour toujours ne pas obtenir le résultat souhaité
J'ai mis à jour parce que le commentaire d'Alexandre, pas votre réponse. Il est facile d'obtenir le numéro 750. Lorsque j'écris l'exemple de Jsfiddle, vous avez publié votre réponse. C'est juste en même temps. La requête médiatique est une façon normale de réagir, ce n'est pas à vous. Tout le monde pourrait l'utiliser.
Bon, je vais vous donner le quart de point de retour. Malheureusement, je devais toujours arrondir à -1
au lieu d'utiliser un bloc inline qui provoque des quirks de dimensionnement, vous pouvez utiliser des éléments de blocage et flotter à la fois Pour les faire pile, vous devez faire un peu de calcul. Puisque vous avez spécifié que le wrapper est Vous pouvez créer une requête de support qui n'appliquera que des styles lorsque la largeur de la page est inférieure à C'est très simple à mettre en œuvre et donne un bon résultat, voici le Fiddle . .left et .right à gauche, donnant à gauche, en donnant à chacun un Largeur de 50% . 80% de la largeur de la page et que le point de rupture du contenu est à 600px (chaque élément 300px) Le point d'arrêt de la page serait à < Code> 750px car 80% de 750 est 600. 750px et défini .left et right à largeur 100% pour les faire pile.
Bonne alternative à ma réponse. De toute façon, nous courons dans des bizarreries et des spécifications supplémentaires, mais c'est toujours bon d'avoir des choix.
@Alexanderlozada ouais, je suppose que lorsque vous flottez les éléments dont vous avez besoin pour vous soucier de Clearfix et tout ce que le jazz revient donc à la préférence personnelle, ou quelle approche joue mieux avec le reste du contenu du site.
Cette réponse semble fonctionner aussi bien, mais je crains que les flotteurs aient des problèmes dus à "Clearfix et à tout ce jazz" (lol!) Parce que je ne sais pas ce que cela fait soit ... J'apprécie vraiment la réponse , mais parce que je suis un codeur inexpérimenté, je pense que la réponse d'Alexandre m'aidera davantage. +1 encore.
@ user3558711 Yep, préférence personnelle. Heureux que nous ayons trouvé une solution.
Je pense que les réponses de @jshanley et @ emn178 font l'affaire, mais je veux pointer quelque chose:
L'affichage puisque vous faites Ceci: l'affichage
Cela peut être mieux adapté comme un commentaire depuis que vous ne répondez pas particulièrement à la question de l'OP.
Vous devriez effectuer une recherche rapide de
Media Query .En outre, quelle chance vous avez une uppote de +5 sur votre première question. Les gens qui postent des diagrammes photo sont mon préféré.