어디에서 적용 할 수 있습니까?

Question

첫 번째 카드의 위쪽 여백은 float: right 버튼에 적용됩니다. 오른쪽 플로트를 제거하면 두 번째 카드 위에 위쪽 여백이 나타납니다. 이 문제를 해결하는 적절한 방법은 무엇입니까? clearfix를 적용 할 위치는 어디입니까?

check example on codepen

Answer 1

그냥 float: left;.card에 CSS 클래스를 추가하고 float: right;

.btn에서

body { 
 
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
 
    font-size: 1rem; 
 
    line-height: 1.5; 
 
    color: #373a3c; 
 
    background-color: #eee; 
 
} 
 

 
.card { 
 
    max-width: 20rem; 
 
    display: inline-block; 
 
    margin-bottom: 0.75rem; 
 
    background-color: #fff; 
 
    border-radius: 0.25rem; 
 
    border: 1px solid rgba(0,0,0,0.125); 
 
    float: left; 
 
} 
 

 
.card-wide { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 35rem; 
 
    margin-bottom: 0.75rem; 
 
    background-color: #fff; 
 
    border-radius: 0.25rem; 
 
    border: 1px solid rgba(0,0,0,0.125); 
 
    
 
    .card-img-left { 
 
    float: left; 
 
    width: 15rem; 
 
    height: 100%; 
 
    border-top-left-radius: 0.25rem; 
 
    border-bottom-left-radius: 0.25rem; 
 
    } 
 
    
 
    .card-block-wide { 
 
    box-sizing: border-box; 
 
    float: left; 
 
    width: 20rem; 
 
    height: 100%; 
 
    padding: 1.25rem; 
 
    .card-title-wide { 
 
     margin: 0; 
 
     font-size: 1.5rem; 
 
    } 
 
    } 
 
    .btn-wide { 
 
    position: absolute; 
 
    bottom: 0; right: 0; 
 
    box-sizing: border-box; 
 
    width: 20rem; 
 
    line-height: 1.5; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    padding: 0.75rem 1rem; 
 
    font-size: 1rem; 
 
    border-bottom-right-radius: 0.25rem; 
 
    text-decoration: none; 
 
    } 
 
} 
 

 
.card-img-top { 
 
    width: 100%; 
 
    display: block; 
 
    height: 180px; 
 
    border-top-right-radius: 0.25rem; 
 
    border-top-left-radius: 0.25rem; 
 
} 
 

 
.card-block { 
 
    padding: 1.25rem; 
 
    &::after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
    } 
 
} 
 

 
.card-title { 
 
    margin-top: 0; 
 
    margin-bottom: 0.75rem; 
 
    font-size: 1.5rem; 
 
    small { 
 
    &::before { 
 
     content: "("; 
 
    } 
 
    &::after { 
 
     content: ")"; 
 
    } 
 
    font-size: 0.75rem; 
 
    color: #777; 
 
    } 
 
} 
 

 
.btn { 
 
    line-height: 1.25; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    padding: 0.5rem 1rem; 
 
    font-size: 1rem; 
 
    border-radius: 0.25rem; 
 
    text-decoration: none; 
 
    /*float: right;*/ 
 
} 
 

 
.btn-primary { 
 
    color: #fff; 
 
    background-color: #0275d8; 
 
    border-color: #0275d8; 
 
    &:hover { 
 
    color: #fff; 
 
    background-color: #025aa5; 
 
    border-color: #01549b; 
 
    } 
 
} 
 

 
.btn-primary:focus, .btn-primary.focus { 
 
    color: #fff; 
 
    background-color: #025aa5; 
 
    border-color: #01549b; 
 
} 
 
.btn-success { 
 
    color: #fff; 
 
    background-color: #5cb85c; 
 
    border-color: #5cb85c; 
 
    &:hover { 
 
    color: #fff; 
 
    background-color: #449d44; 
 
    border-color: #419641; 
 
    } 
 
} 
 

 
.btn-success:focus, .btn-success.focus { 
 
    color: #fff; 
 
    background-color: #449d44; 
 
    border-color: #419641; 
 
}

<div class="container"> 
 
    <div class="card"> 
 
     <img src="http://image.tmdb.org/t/p/original/c5o7FN2vzI7xlU6IF1y64mgcH9E.jpg" alt="Card image cap" class="card-img-top" /> 
 
     <div class="card-block"> 
 
     <h4 class="card-title">The Prestige <small>2006</small></h4> 
 
     <p class="card-text"> 
 
     Two stage magicians engage in competitive one-upmanship in an attempt to create the ultimate stage illusion.</p> 
 
     <a href="#" class="btn btn-success">Add as favourite</a> 
 
     </div> 
 
    </div> 
 
    <div class="card-wide"> 
 
     <img src="http://i.imgur.com/g0Fl4pn.jpg" class="card-img-left"> 
 
     <div class="card-block-wide"> 
 
     <h4 class="card-title-wide">Inception</h4> 
 
     <p class="card-text-wide"> 
 
     Two stage magicians engage in competitive one-upmanship in an attempt to create the ultimate stage illusion.</p> 
 
     </div> 
 
     <a href="#" class="btn-wide btn-success">Add as favourite</a> 
 
    </div> 
 
</div>