부트스트랩 정렬문의드립니다...

김준수사랑

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2023-03-14 (화) 01:50:01 2,328

웹진형태의 게시판인데요 아래처럼되어있습니다.

이미지가 왼쪽에 있고 오른쪽에 글이 있고요

이걸 최소사이즈로 줄이면 이미지가 100프로가되고 글씨들이 이미지밑으로 가버립니다..

최소사이즈가되더라도 왼쪽 이미지 오른쪽 글씨를 유지하려면 어떻게 해야하죠?

class="row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-2

부트스트랩

답변 2개 / 댓글 7개

채택된 답변

+20 포인트

하늘뚱

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2023-03-14 (화) 02:17:35

음.... 만약에 한줄씩 나오는 부모 태그가 있다고 가정을 한다면

예를 들어서요.

Copy

HTML

<div class="container">
  <img src="image.jpg" alt="Your Image">
  <div class="text">
    <p>Your text here</p>
  </div>
</div>

//---

CSS

.container {
  display: flex;
  align-items: center;
}

img {
  flex-shrink: 0;
  width: 50%;
  max-width: 200px; /* 혹은 또 다른 원하는 임의값으로*/
  margin-right: 1rem;
}

.text {
  flex-grow: 1;
}

답변에 대한 댓글 5개

하늘뚱

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2023-03-14 (화) 02:20:56

img 요소의 flex-shrink: 0 속성은 이미지가 지정된 너비 아래로 축소되는 것을 방지.
width: 50% 및 max-width: 200px 속성은 각각 이미지의 초기 너비와 최대 너비를 지정. 필요에 맞게 이 값을 조정.
.text 요소의 flex-grow: 1 속성을 사용하면 텍스트가 컨테이너의 나머지 공간을 채울 수 있습니다. 이렇게 하면 컨테이너 크기가 조정되더라도 텍스트가 이미지 오른쪽에 유지됩니다.

김준수사랑

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2023-03-14 (화) 02:24:15

이미지의 정렬이 부트스트랩 그리드로 되어있는데..
이방식으로 처리할수는 없는건가요??
class="row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-2

하늘뚱

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2023-03-14 (화) 02:29:10

상관없습니다.

하늘뚱

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2023-03-14 (화) 02:32:42

그럼 이렇게 수정해 보세요.
[code]
<div class="container">
<div class="row row-cols-1 row-cols-md-2">
<div class="col-md-6">
<img src="image.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-6">
<p>원하시는 택스트</p>
</div>
</div>
</div>
[/code]