요소가 플로트가 남아 있어도 오른쪽으로 이동합니다.

Question

웹 개발에 익숙하지 않고 제 인생에서 내 코드의 문제점을 파악할 수 없습니다. 왼쪽에 짧은 요소가 하나있는 긴 요소 하나를 갖고 싶습니다. 그런 다음 긴 요소와 나란히 두 개의 짧은 요소를 갖고 싶습니다. 내가 큰 요소를 설정하더라도

후 해요 무엇도 더 작은 요소가 떠 그래서

이가 난 후 무엇을 당신에게 아주 간단한지도를 그립니다 왼쪽, 여전히 3 명이 오른쪽으로갑니다. 나는이 새로운 해요 말했듯이 그래서 뭔가 바보는 아마, 그러나 사람이 그 것 큰

바이올린 도움이 될 수있는 경우 : https://jsfiddle.net/es09vLc0/

HTML

html { 
 
    background-color:black; 
 
} 
 
.blogPostsContainer { 
 
    width:100%; 
 
    border:solid; 
 
    margin-top:100px; 
 
} 
 
.blogPost { 
 
    display:inline-block; 
 
    background-color:black; 
 
    width:49%; 
 
    border:solid; 
 
    border-color:#FFF010; 
 
    border-radius:1px; 
 
    color:white; 
 
    margin-top:10px; 
 
    height:240px; 
 
    overflow:hidden; 
 
} 
 
.blogPost h3 { 
 
    color:white; 
 
} 
 
.blogPost h1 {  
 
    text-align:center; 
 
    border-color:dodgerblue; 
 
    border:solid; 
 
    border-left:none; 
 
    border-right:none; 
 
} 
 
.blogPost img { 
 
    width:95%; 
 
    height:200px; 
 
    margin:10px; 
 
}

<div class="BlogPostsContainer"> 
 
    <div class="blogPost" style="height:700px; float:left"> 
 
    <img src="home_page/images/test/hqdefault-1.jpg" /> 
 
    <h1>This is the Title section</h1> 
 
    <h3>This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
    </h3> 
 
    </div> 
 
    <div class="blogPost" style="float:right"> 
 
    <img src="home_page/images/test/hqdefault-2.jpg" /> 
 
    <h1>DESCRIPT</h1> 
 
    <h3>THIS IS DESCRIPTIONNNN 
 
    </h3> 
 
    </div> 
 
    <div class="blogPost" style="float:left"> 
 
    <img src="home_page/images/test/hqdefault-3.jpg" /> 
 
    <h1>This is the Title section</h1> 
 
    <h3>This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
    </h3> 
 
    </div> 
 
    <div class="blogPost" style="float:right"> 
 
    <img src="home_page/images/test/hqdefault-3.jpg" /> 
 
    <h1>This is the Title section</h1> 
 
    <h3>This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
    </h3> 
 
    </div> 
 
</div>

을

Answer 1

float: left 상자를 끝으로 이동하고 "clear"라는 div를 CSS clear: both과 함께 추가했습니다.

html { 
 
    background-color: black; 
 
} 
 
.blogPostsContainer { 
 
    width: 100%; 
 
    border: solid; 
 
    margin-top: 100px; 
 
} 
 
.blogPost { 
 
    display: inline-block; 
 
    background-color: black; 
 
    width: 49%; 
 
    border: solid; 
 
    border-color: #FFF010; 
 
    border-radius: 1px; 
 
    color: white; 
 
    margin-top: 10px; 
 
    height: 240px; 
 
    overflow: hidden; 
 
} 
 
.blogPost h3 { 
 
    color: white; 
 
} 
 
.blogPost h1 { 
 
    text-align: center; 
 
    border-color: dodgerblue; 
 
    border: solid; 
 
    border-left: none; 
 
    border-right: none; 
 
} 
 
.blogPost img { 
 
    width: 95%; 
 
    height: 200px; 
 
    margin: 10px; 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div class="BlogPostsContainer"> 
 
    <div class="blogPost" style="height:700px; float:left"> 
 
    <img src="home_page/images/test/hqdefault-1.jpg" /> 
 
    <h1>This is the Title section</h1> 
 
    <h3>This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
      </h3> 
 
    </div> 
 
    <div class="blogPost" style="float:right"> 
 
    <img src="home_page/images/test/hqdefault-2.jpg" /> 
 
    <h1>DESCRIPT</h1> 
 
    <h3>THIS IS DESCRIPTIONNNN 
 
      </h3> 
 
    </div> 
 
    <div class="blogPost" style="float:right"> 
 
    <img src="home_page/images/test/hqdefault-3.jpg" /> 
 
    <h1>This is the Title section</h1> 
 
    <h3>This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
      </h3> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="blogPost" style="float:left"> 
 
    <img src="home_page/images/test/hqdefault-3.jpg" /> 
 
    <h1>This is the Title section</h1> 
 
    <h3>This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
      </h3> 
 
    </div> 
 
</div>