내 상황에서 한 줄로 div를 표시하는 방법

Question

"빈칸"은 전체 페이지와 같습니다. 이제 "주제로 돌아 가기"텍스트 뒤에 Google 광고 div를 추가하고 싶습니다. 나는 이미 "float : left"를 시도한다. 그것은 잘 작동하지 않습니다. 당신이 부유하고, 용기로 포장하고 싶은

<div class="blank"> 
    <p> 
    <a href="#"><&nbsp;Back to the topic</a> 
    </p> 
    this is google ads! 
</div> 

CSS

.blank p{ 
    width:980px; 
    height:25px; 
    margin:80px auto 0px auto; 
} 
.blank p a{ 
    color:#007aff; 
    font-size:20px; 
} 

Answer 1

분리하여 요소. 그 후에, 분명해. JSFIDDLE

<div class="container"> 
    <div class="blank"> 
     <p><a href="#">&laquo; &nbsp;Back to the topic</a></p> 
    </div> 
    <div class="advert"><p>this is google ads!</p></div> 
    <div class="clear"></div> 
</div> 

CSS

div.container { 
    width:980px; 
    height:25px; 
    margin:80px auto 0px auto;} 

.blank { 
    float: left; 
    margin-right: 20px; 
} 

.blank p a{ 
    color:#007aff; 
    font-size:20px; 
} 

.advert {float: left;} 

.clear {clear: both;} 

Answer 2

당신은 사용할 수 display: inline-block;

HTML

<div class="blank"> 
    <p><a href="#"><&nbsp;Back to the topic</a></p> 
    <div class="google-ad">this is google ads!</div> 
</div> 

CSS :

.blank p{ 
    width:980px; 
    height:25px; 
    margin:80px auto 0px auto; 
    display: inline-block; 
} 
.blank p a{ 
    color:#007aff; 
    font-size:20px; 
} 
.google-ad{ 
    display: inline-block; 
}