2014-12-02 2 views
-3

«Пустой» такой же широкий, как и вся страница. Теперь я хочу добавить рекламный div google после текста «вернуться к теме». Я уже пытаюсь «float: left». Это не работает.Как сделать отображение div в одной строке в моей ситуации

<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; 
} 

ответ

2

Отдельные ваши элементы, что вы хотите, чтобы плавать, и завернуть их с контейнером. После этого ясно. 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;} 
+0

Это работает. Большое спасибо! И могу ли я спросить, зачем нам нужно «ясно»? – weblen

+0

Прочтите это: http://www.w3schools.com/cssref/pr_class_clear.asp – vaso123

0

Вы можете использовать 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; 
} 
Смежные вопросы