관련 요소가 누락 된 경우 플로트 된 객체의 동작

Question

<div class="pagination"> 
    <?php if($page->hasPrevVisible()): ?> 
    <span class="prev"> 
     <em>Previous Article</em> 
     <a href="<?php echo $page->prevVisible()->url() ?>"><?php echo $page->prevVisible()->title() ?></a> 
    </span> 
    <?php endif ?> 

    <?php if($page->hasNextVisible()): ?> 
    <span class="next"> 
     <em>Next Article</em> 
     <a href="<?php echo $page->nextVisible()->url() ?>"><?php echo $page->nextVisible()->title() ?></a> 
    </span> 
    <?php endif ?> 
</div> 

기본적으로 내 기사보기에 표시됩니다. 이 경우와 2 개의 범위에서 중요하지 않은 주요 div가 있습니다. 이전 기사가 다음에 없으면 옵션이 표시되지 않습니다. 이제 CSS에 : 나를이 display:block가 라인 드롭 것을 유지하기 위해 정말 중요하기 때문에

.pagination em { 
font-family: Arvo; 
font-size: .8em; 
font-style: normal; 
text-transform: uppercase; 
display: block; 
color: #838383; 
} 

.prev { 
width: 49%; 
display: inline-block; 
} 

.next { 
width: 49%; 
text-align: right; 
float: right; 
} 

나는 .pagination em 포함 시켰습니다. flood를 사용하지 않고 .next을 .prev과 정렬시키지 못하면 한 줄 아래로갑니다. 어쩌면 문제는 em에 있지만 어쩌면 확실하지 않습니다.

이전 기사와 다음 기사가있는 경우 매력처럼 작동합니다. 이전 기사 만있는 경우에도 완벽하게 나타납니다. 그러나 다음 기사 만있는 경우 .next이 제대로 정렬되지 않습니다.

실제 예를 보려면 page의 하단을보십시오.

Answer 1

귀하의 문제는 .pagination 클래스가 하나의 플로팅 된 div로 지워지지 않는 것입니다.

CSS의 .pagination 클래스에 overflow: auto;을 단순히 추가하면 문제가 해결됩니다.

.pagination { 
    padding: 1.25em 0px; 
    font-size: 0.8em; 
    line-height: 1.2em; 
    border-bottom: 0.07143em solid rgb(55, 185, 81); 
    font-family: "Elena Web",Georgia; 

    overflow: auto; 
} 

예 : http://cssdesk.com/q2h4U

희망이 도움이, 그리고 행운을 빕니다!

Answer 2

float은 부모의 크기를 계산할 때 크기가 고려되지 않는다는 것을 의미하는 부모의 "내부"치수에서 요소를 떠있게됩니다.

당신은 양쪽에 display:inline-block를 사용하고, 한쪽 만이 존재하는 경우 더미 span를 사용할 수 있습니다

http://jsfiddle.net/WR6cy/

<!-- when both sides present --> 
<div class="pagination"> 
    <span class="prev"> 
     <em>Previous Article</em> 
     <a href="#">Previous Title</a> 
    </span> 
    <span class="next"> 
     <em>Next Article</em> 
     <a href="#">Next Title</a> 
    </span> 
</div> 

<!-- when only prev side presents --> 
<div class="pagination"> 
    <span class="prev"> 
     <em>Previous Article</em> 
     <a href="#">Previous Title</a> 
    </span> 
</div> 

<!-- when only next side presents, use a dummy prev side to "push" the next --> 
<div class="pagination"> 
    <span class="prev"> 
    </span> 
    <span class="next"> 
     <em>Next Article</em> 
     <a href="#">Next Title</a> 
    </span> 
</div> 

.prev { 
    width: 49%; 
    display: inline-block; 
} 
.next { 
    width: 49%; 
    text-align: right; 
/* float: right;*/ 
    display:inline-block; 
} 

편집 :

이를 달성하기 현재 PHP로 약간 수정할 수 있습니다 :

<div class="pagination"> 
    <span class="prev"> 
    <?php if($page->hasPrevVisible()): ?> 
     <em>Previous Article</em> 
     <a href="<?php echo $page->prevVisible()->url() ?>"><?php echo $page->prevVisible()->title() ?></a> 
    <?php endif ?> 
    </span> 

    <span class="next"> 
    <?php if($page->hasNextVisible()): ?> 
     <em>Next Article</em> 
     <a href="<?php echo $page->nextVisible()->url() ?>"><?php echo $page->nextVisible()->title() ?></a> 
    <?php endif ?> 
    </span> 
</div>