왼쪽에는 이미지, 가운데에는 텍스트, 오른쪽에는 버튼이 포함된 음식 주문 레이아웃을 만들고 있습니다.

이미지는 왼쪽에 고정되어 있지만 가운데에 있는 텍스트의 길이를 기준으로 버튼이 움직입니다. 그래서 저는 이 레이아웃을 수정하고 싶습니다:

버튼도 왼쪽 이미지와 마찬가지로 오른쪽에 고정되며 중간 테스트 길이에 영향을 받지 않습니다.

텍스트가 더 길면 텍스트가 다음 줄로 이동됩니다.

Foodlist.js

"react"에서 React 가져오기;; import "./Foodlist.css"; "../../StateProvider"에서 가져오기 { useStateValue }; function Foodlist({ id, 제목, 평점, 이미지, 가격, 정보, 재고, nostock }) { const [{ basket }, 파견] = useStateValue(); // console.log("이것은 바구니입니다>>>", basket); const addToBasket = () => // 항목을 데이터 레이어로 전달합니다. 보내다({ 유형: "ADD_TO_BASKET", 안건: { 아이디: 아이디, 제목: 제목, 정보: 정보, 이미지: 이미지, 가격: 가격, 주식: 주식, nostock: 노스톡, 등급: 등급, }, }); }; 반품 ( 
 
  +  추가하다  */} 
 
 
 
{제목}
 

      <소형>
       엔
      {price} 
 
  +  추가하다  
 
 ); } 기본 음식 목록 내보내기

Foodlist.css

.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; }