css 질문입니다 채택완료
그눅
2년 전
조회 1,913
</p>
<p><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>
<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>
<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>
<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></p>
<p>
이렇게 코드를 짠 상태인데
이미지가 왼쪽으로 옮겨졌으면 좋겠는데
밑에 이미지 div에 css클래스에 float-left 넣어줘도 가지가 않습니다
기존 css인 row때문일까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
2년 전
코드 순서를 ㅂ꾸면 안되나요?
</p>
<pre>
<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>
<h6 class="section-subtitle mb-4"><strong>내용1</strong></h6>
</div>
</div></pre>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
�
그눅
2년 전
�
세크티
2년 전
부트스트랩4 사용하시는거 같은데요.
https://getbootstrap.com/docs/4.6/layout/grid/#order-classes
order 클래스 사용해 보세요
https://getbootstrap.com/docs/4.6/layout/grid/#order-classes
order 클래스 사용해 보세요
�
그눅
2년 전
order클래스도 페이지 사이즈가 줄어들면 전에 질문했던대로 나오네요,,
댓글을 작성하려면 로그인이 필요합니다.
2년 전
만약 이미지가 왼쪽으로 정렬되길 원한다면, 각 이미지 div에 다음과 같은 CSS 속성을 추가할 수 있습니다.
</p>
<p>.col-md-6:nth-child(even) img {
float: left;
}</p>
<p>이 코드는 짝수 번째 .col-md-6 div의 자식 요소인 이미지에게 왼쪽으로 흐르는 float를 지정합니다. 이렇게 함으로써, 각 이미지가 왼쪽에 정렬되어, 나머지 콘텐츠가 오른쪽에 나타나게 됩니다. 따라서, 전체 코드는 다음과 같이 수정될 수 있습니다.
</p>
<p><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>
<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>
<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>
<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></p>
<p><style>
.col-md-6:nth-child(even) img {
float: left;
}
</style></p>
<p>위의 코드를 적용하면, 이미지가 왼쪽으로 흐르는 float 속성을 적용받게 되며, 따라서 각 이미지가 왼쪽으로 정렬됩니다.
챗GPT 답변입니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
2년 전
</p>
<p> <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>
<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>
<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>
<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></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
전에 했던 질문 이어서 입니다ㅠ