css 질문입니다
본문
<div class="row">
<div class="col-md-6 pr-md-5 mb-4 mb-md-0">
<h6 class="" style="color:#0138bd;"><strong>제목 1</strong></h6>
<h3 class=""><strong>설명 1</strong></h3>
<br>
<h6 class="section-subtitle mb-4"><strong>내용1</strong></h6>
</div>
<div class="col-md-6 pr-md-5 mb-4 mb-md-0">
<img src="assets/imgs/이미지01.jpg" alt="" class="w-100 mt-3 shadow-sm">
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 pr-md-5 mb-4 mb-md-0">
<h6 class="" style="color:#0138bd;"><strong>제목2</strong></h6>
<h3 class=""><strong>설명2</strong></h3>
<br>
<h6 class="section-subtitle mb-4"><strong>내용2</strong></h6>
</div>
<div class="col-md-6 pr-md-5 mb-4 mb-md-0">
<img src="assets/imgs/이미지2.jpg" alt="" class="w-100 mt-3 shadow-sm">
</div>
</div>
이렇게 코드를 짠 상태인데
이미지가 왼쪽으로 옮겨졌으면 좋겠는데
밑에 이미지 div에 css클래스에 float-left 넣어줘도 가지가 않습니다
기존 css인 row때문일까요?
답변 3
코드 순서를 ㅂ꾸면 안되나요?
<div class="row">
<div class="col-md-6 pr-md-5 mb-4 mb-md-0">
<img src="assets/imgs/이미지01.jpg" alt="" class="w-100 mt-3 shadow-sm">
</div>
<div class="col-md-6 pr-md-5 mb-4 mb-md-0">
<h6 class="" style="color:#0138bd;"><strong>제목 1</strong></h6>
<h3 class=""><strong>설명 1</strong></h3>
<br>
<h6 class="section-subtitle mb-4"><strong>내용1</strong></h6>
</div>
</div>
https://sir.kr/qa/498167?s_tag=%EA%B7%B8%EB%88%84%EB%B3%B4%EB%93%9C5
전에 했던 질문 이어서 입니다ㅠ
부트스트랩4 사용하시는거 같은데요.
https://getbootstrap.com/docs/4.6/layout/grid/#order-classes
order 클래스 사용해 보세요
order클래스도 페이지 사이즈가 줄어들면 전에 질문했던대로 나오네요,,
<div class="row">
<div class="col-md-6 pr-md-5 mb-4 mb-md-0 order-1">
<h6 class="" style="color:#0138bd;"><strong>제목 1</strong></h6>
<h3 class=""><strong>설명 1</strong></h3>
<br>
<h6 class="section-subtitle mb-4"><strong>내용1</strong></h6>
</div>
<div class="col-md-6 pr-md-5 mb-4 mb-md-0">
<img src="assets/imgs/이미지01.jpg" alt="" class="w-100 mt-3 shadow-sm">
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 pr-md-5 mb-4 mb-md-0 order-1">
<h6 class="" style="color:#0138bd;"><strong>제목2</strong></h6>
<h3 class=""><strong>설명2</strong></h3>
<br>
<h6 class="section-subtitle mb-4"><strong>내용2</strong></h6>
</div>
<div class="col-md-6 pr-md-5 mb-4 mb-md-0">
<img src="assets/imgs/이미지2.jpg" alt="" class="w-100 mt-3 shadow-sm">
</div>
</div>
만약 이미지가 왼쪽으로 정렬되길 원한다면, 각 이미지 div에 다음과 같은 CSS 속성을 추가할 수 있습니다.
.col-md-6:nth-child(even) img {
float: left;
}
이 코드는 짝수 번째 .col-md-6 div의 자식 요소인 이미지에게 왼쪽으로 흐르는 float를 지정합니다.
이렇게 함으로써, 각 이미지가 왼쪽에 정렬되어, 나머지 콘텐츠가 오른쪽에 나타나게 됩니다.
따라서, 전체 코드는 다음과 같이 수정될 수 있습니다.
<div class="row">
<div class="col-md-6 pr-md-5 mb-4 mb-md-0">
<h6 class="" style="color:#0138bd;"><strong>제목 1</strong></h6>
<h3 class=""><strong>설명 1</strong></h3>
<br>
<h6 class="section-subtitle mb-4"><strong>내용1</strong></h6>
</div>
<div class="col-md-6 pr-md-5 mb-4 mb-md-0">
<img src="assets/imgs/이미지01.jpg" alt="" class="w-100 mt-3 shadow-sm">
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 pr-md-5 mb-4 mb-md-0">
<h6 class="" style="color:#0138bd;"><strong>제목2</strong></h6>
<h3 class=""><strong>설명2</strong></h3>
<br>
<h6 class="section-subtitle mb-4"><strong>내용2</strong></h6>
</div>
<div class="col-md-6 pr-md-5 mb-4 mb-md-0">
<img src="assets/imgs/이미지2.jpg" alt="" class="w-100 mt-3 shadow-sm" style="float: left;">
</div>
</div>
<style>
.col-md-6:nth-child(even) img {
float: left;
}
</style>
위의 코드를 적용하면, 이미지가 왼쪽으로 흐르는 float 속성을 적용받게 되며, 따라서 각 이미지가 왼쪽으로 정렬됩니다.
챗GPT 답변입니다.
답변을 작성하시기 전에 로그인 해주세요.
