왼쪽에 고정된 이미지, 오른쪽에 버튼, 가운데 또는 가운데 텍스트가 있는 레이아웃을 만듭니다.
<p>왼쪽에는 이미지, 가운데에는 텍스트, 오른쪽에는 버튼이 포함된 음식 주문 레이아웃을 만들고 있습니다. </p>
<p>이미지는 왼쪽에 고정되어 있지만 가운데에 있는 텍스트의 길이를 기준으로 버튼이 움직입니다. 그래서 저는 이 레이아웃을 수정하고 싶습니다: </p>
<p> 버튼도 왼쪽 이미지와 마찬가지로 오른쪽에 고정되며 중간 테스트 길이에 영향을 받지 않습니다. </p>
<p>텍스트가 더 길면 텍스트가 다음 줄로 이동됩니다. </p>
<p><strong>Foodlist.js</strong></p>
<pre class="brush:php;toolbar:false;">"react"에서 React 가져오기;;
import "./Foodlist.css";
"../../StateProvider"에서 가져오기 { useStateValue };
function Foodlist({ id, 제목, 평점, 이미지, 가격, 정보, 재고, nostock }) {
const [{ basket }, 파견] = useStateValue();
// console.log("이것은 바구니입니다>>>", basket);
const addToBasket = () =>
// 항목을 데이터 레이어로 전달합니다.
보내다({
유형: "ADD_TO_BASKET",
안건: {
아이디: 아이디,
제목: 제목,
정보: 정보,
이미지: 이미지,
가격: 가격,
주식: 주식,
nostock: 노스톡,
등급: 등급,
},
});
};
반품 (
<div className="음식">
<div className="food__details">
<img src={이미지} alt=""
{/* <button onClick={addToBasket} style={{fontWeight: "bold"}}>
<strong style={{fontSize: 20}}>+ </strong>
추가하다
</버튼> */}
</div>
<div className="food__title">
<div className="food__info__layout">
<p style={{fontWeight: "bold"}}>{제목}</p>
<p className="food__info">
<소형>엔
<strong style={{fontSize: 14 ,fontWeight: 100}}>{price}</strong>
</p>
</div>
<button onClick={addToBasket} style={{fontWeight: "bold"}}>
<strong style={{fontSize: 20}}>+ </strong>
추가하다
</버튼>
</div>
</div>
);
}
기본 음식 목록 내보내기</pre>
<p><strong>Foodlist.css</strong></p>
<pre class="brush:php;toolbar:false;">.food {
디스플레이: 플렉스;
플렉스 방향: 행;
배경색: 투명;
항목 정렬: 중앙;
여백: 5px;
}
.food__세부사항{
디스플레이: 플렉스;
플렉스 방향: 행;
}
.food__details > img {
최대 높이: 100px;
너비: 120px;
객체 맞춤: 포함;
오른쪽 여백: 10px;
테두리: 1px 순금;
테두리 반경: 10px;
오버플로: 숨김;
}
/*
.food__details > 버튼 {
배경: 금;
테두리: 없음;
커서: 포인터;
테두리 반경: 5px;
높이: 적합 콘텐츠;
너비: 내용에 맞게;
} */
.food__info__layout {
디스플레이: 플렉스;
플렉스 방향: 열;
}
.food__info {
디스플레이: 플렉스;
플렉스 방향: 행;
높이: 자동;
/* 여백-하단: 5px; */
}
.food__title {
디스플레이: 플렉스;
플렉스 방향: 행;
}
.food__title > 버튼 {
배경: 금;
테두리: 없음;
커서: 포인터;
테두리 반경: 5px;
높이: 적합 콘텐츠;
너비: 내용에 맞게;
왼쪽 여백: 15px;
}</pre></p>
