SIR
목록으로

css 질문입니다 채택완료

그그눅
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 2,080
답변 3
목록

Copy 
<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때문일까요?

#그누보드5

답변 3개

채택된 답변
+20 포인트

코드 순서를 ㅂ꾸면 안되나요?

Copy 
<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>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

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에 다음과 같은 CSS 속성을 추가할 수 있습니다.

Copy 
.col-md-6:nth-child(even) img {
  float: left;
}

이 코드는 짝수 번째 .col-md-6 div의 자식 요소인 이미지에게 왼쪽으로 흐르는 float를 지정합니다. 
이렇게 함으로써, 각 이미지가 왼쪽에 정렬되어, 나머지 콘텐츠가 오른쪽에 나타나게 됩니다.
따라서, 전체 코드는 다음과 같이 수정될 수 있습니다.

Copy 
<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 답변입니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Copy 
<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>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고