왼쪽에 고정된 이미지, 오른쪽에 버튼, 가운데 또는 가운데 텍스트가 있는 레이아웃을 만듭니다.

Question

<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>

Answer 1

왼쪽에 이미지가 있고 오른쪽에 버튼이 있도록 하려면 그 사이의 텍스트 길이에 관계없이 grid-template-columns: auto 1fr auto직계 하위 요소로 포함하는 래퍼를 그리드에 설정할 수 있습니다.

아래에서 원하는 단순화된 버전을 찾으세요. HTML 구조를 단순화했습니다. 복사하는 경우 React의 class 更改为 className을 추가하는 것을 잊지 마세요.

으아악 으아악