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

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

QA

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

본문

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

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

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

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

 

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

이 질문에 댓글 쓰기 :

답변 2

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

예를 들어서요.


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

 

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

그럼 이렇게 수정해 보세요.


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

나리야 부분은 함수로 되어있는 듯 하네요. 링크 주신 부분에도 질문을 하셨는데

아직 답변이 없어서 그러셨군요. 

나리야는 저 기억으로 함수부분을 수정을 하셔야 하고
질문에 브라우즈 창을 최소 모바일 사이즈까지 줄인다고
가정을 하면 미디어쿼리 부분을 수정해서 해야 정상적을 겁니다.
크롬으로 개발자 도구 F12로 여시고 줄이는 부분을 찍어 보시는 것도 방법인데요.

답변을 작성하시기 전에 로그인 해주세요.
전체 205
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT