Comment puis-je faire en sorte que ce div contenant prenne la largeur de ses éléments enfants?
débordement de pile
Je voudrais fave_holdrester à 100% de ce qu'il contient div, mais je voudrais .favesavoir une largeur uniquement de ses éléments enfants. Les éléments enfants sont rendus dynamiquement et ont une largeur définie.
Voici le React / JSX.
<div id = 'fave_hold'>
{this.props.MenuFave.current === '1' &&
<div className = 'faves' id = 'fave_hold_arc' >
{tags1}
</div>
}
{this.props.MenuFave.current === '280' &&
<div className = 'faves' id = 'fave_hold_news' >
{tags280}
</div>
}
{this.props.MenuFave.current === '268' &&
<div className = 'faves' id = 'fave_hold_news' >
{tags268}
</div>
}
</div>
</div>
Voici le CSS
#fave_hold{
width: 100%;
height: 100%;
}
.faves{
height: 100%;
}
J'ai essayé de jouer avec l'écran en vain.
Voici une capture d'écran.
L'objectif final est de centrer le contenu. Et c'est comme ça que je veux le faire.
Voici le prototype en ligne.
Sagiv bg
Vos enfants sont définis comme floatétant hors de flux, le parent ignorera leur taille.
J'opterais pour une approche différente et supprimerais le floatet utiliser flex.
.faves {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
Et retirez le position:relativeet 'float' de .bookmark_page.
Vous êtes donc parti avec quelque chose comme ça:
.bookmark_page {
border-radius: 4px;
width: 250px;
margin: 6px;
border: 6px solid white;
box-shadow: 0px 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: 0px 1px 3px rgba(34,25,25,0.4);
}
Avec ces changements, vous devriez obtenir un résultat comme celui-ci:
Et sur petit écran: 
Éditer
comment puis-je me débarrasser du désordre au bas de chaque élément enfant maintenant?
Je viens de remarquer que vous vouliez dire le "désordre" des enfants en bas.
Vous pouvez définir .favescette méthode pour obtenir ce que vous voulez:
.faves {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
J'envisagerais de régler les enfants width( .bookmark_page) un peu plus haut, peut-être 260px.
Le résultat:
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
modifier le
Articles connexes
TOP liste
- 1
comment afficher un bouton au-dessus d'un autre élément ?
- 2
impossible d'obtenir l'image d'arrière-plan en plein écran dans reactjs
- 3
Je continue à obtenir l'objet 'WSGIRequest' n'a pas d'attribut 'Get' sur django
- 4
comment supprimer "compte de connexion google" à des fins de développement - actions sur google
- 5
Conversion double en BigDecimal en Java
- 6
Impossible d'accéder à la vue personnalisée pendant le test de l'interface utilisateur dans XCode
- 7
Algorithme: diviser de manière optimale une chaîne en 3 sous-chaînes
- 8
Passer la taille d'un tableau 2D à une fonction ?
- 9
Comment obtenir l'intégration contextuelle d'une phrase dans une phrase à l'aide de BERT ?
- 10
Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?
- 11
CSS: before ne fonctionne pas sur certains éléments,: after fonctionne très bien
- 12
Comment créer un bot à compte à rebours dans Discord en utilisant Python
- 13
Comment ajouter une entrée à une table de base de données pour une combinaison de deux tables
- 14
Exporter la table de l'arborescence vers CSV avec mise en forme
- 15
Comment activer le message Pylint "too-many-locals" dans VS Code?
- 16
Créer un système Buzzer à l'aide de python
- 17
Spring @RequestParam DateTime format comme ISO 8601 Date Heure facultative
- 18
Empêcher l'allocation de mémoire dans la génération de combinaison récursive
- 19
Déplacement des moindres carrés d'ajustement pour les déplacements de points ayant des problèmes
- 20
Comment choisir le nombre de fragments et de répliques Elasticsearch
- 21
Microsoft.WebApplication.targets
laisse moi dire quelques mots