Créez une mise en page avec une image fixe à gauche, un bouton à droite et un texte central ou centré
P粉681400307
2023-09-04 21:02:34
<p>Je crée une présentation de commande de repas qui contient une image à gauche, du texte au milieu et un bouton à droite. </p>
<p>L'image est fixée à gauche, mais le bouton se déplace en fonction de la longueur du texte au milieu. Je souhaite donc corriger cette mise en page : </p>
Le bouton <p> sera également fixé à droite, comme sur l'image de gauche, et ne dépendra pas de la longueur médiane du test. </p>
<p>Si le texte est plus long, il sera déplacé vers la ligne suivante. </p>
<p><strong>Foodlist.js</strong></p>
<pre class="brush:php;toolbar:false;">importer React depuis "react" ;
importer "./Foodlist.css";
importer { useStateValue } depuis "../../StateProvider" ;
function Foodlist({ id, title, rating, image, price, info, stock, nostock }) {
const [{ panier }, dispatch] = useStateValue();
// console.log("Ceci est le panier >>>", panier);
const addToBasket = () =>
// envoie l'élément dans la couche de données
expédition({
tapez : "ADD_TO_BASKET",
article: {
je l'ai fait,
titre : titre,
infos : infos,
image : image,
prix : prix,
stock: stock,
pas de stock : pas de stock,
note : note,
},
});
} ;
retour (
<div className="nourriture">
<div className="food__details">
<img src={image} alt="" />
{/* <button onClick={addToBasket} style={{fontWeight : "bold"}}>
<strong style={{fontSize: 20}}>+ </strong>
Ajouter
</bouton> */}
</div>
<div className="food__title">
<div className="food__info__layout">
<p style={{fontWeight : "bold"}}>{title}</p>
<p className="food__info">
<petit>¥ </petit>
<strong style={{fontSize : 14 ,fontWeight : 100}}>{price}</strong>
</p>
</div>
<button onClick={addToBasket} style={{fontWeight : "bold"}}>
<strong style={{fontSize: 20}}>+ </strong>
Ajouter
</bouton>
</div>
</div>
);
}
exporter la liste des aliments par défaut</pre>
<p><strong>Foodlist.css</strong></p>
<pre class="brush:php;toolbar:false;">.food {
affichage : flexible ;
direction flexible : rangée ;
couleur d'arrière-plan : transparent ;
align-items : centre ;
marge : 5px ;
}
.food__détails{
affichage : flexible ;
direction flexible : rangée ;
}
.food__details > img {
hauteur maximale : 100 px ;
largeur : 120 px ;
object-fit : contenir ;
marge droite : 10 px ;
bordure : 1px en or massif ;
rayon de bordure : 10 px ;
débordement caché;
}
/*
.food__details > bouton {
fond : or ;
bordure : aucune ;
curseur : pointeur ;
rayon de bordure : 5 px ;
hauteur : contenu ajusté ;
largeur : ajustement du contenu ;
} */
.food__info__layout {
affichage : flexible ;
direction flexible : colonne ;
}
.food__info {
affichage : flexible ;
direction flexible : rangée ;
hauteur : automatique ;
/* marge inférieure : 5px ; */
}
.food__titre {
affichage : flexible ;
direction flexible : rangée ;
}
.food__title > bouton {
fond : or ;
bordure : aucune ;
curseur : pointeur ;
rayon de bordure : 5 px ;
hauteur : contenu ajusté ;
largeur : ajustement du contenu ;
marge gauche : 15 px ;
}</pre></p>
Pour avoir l'image à gauche et le bouton à droite, quelle que soit la longueur du texte entre les deux, vous pouvez définir
grid-template-columns: auto 1fr auto
un wrapper sur la grille qui les inclut comme enfants directs.Trouvez ci-dessous la version simplifiée que vous souhaitez. Notez que j'ai simplifié la structure HTML. Si vous copiez, n'oubliez pas d'ajouter les React
class
更改为className
.