Нужно отобразить блоки внутри другого блока.
Внутренние блоки должны в ряд, то есть с float:left
Родительский блок не должен обладать обтеканием, то есть float:none; и автоматически вписываться в браузер, с margin:40px;
В чем собственно проблема, когда внутренние блоки имеют свойство float:left, то родительский блок перестает держать внутренние блоки, то есть, как-будто бы внутренние сами по себе.
http://img405.imageshack.us/img405/3675/96338941.png (на картинке все ясно)
воот.
Я нашел решение в виде добавления в последний блок свойства clear:both; но это не кошерно, хотелось бы более красивое решение на уровне css.
Исходный код страницы:
<style>
*{
padding:0;
margin:0;
}
.testblock{
margin:40px;
background:#aaa;
border:1px solid #ff0000;
padding:20px;
}
.someBox{
width:100px;
height:30px;
margin:10px;
float:left;
color:#fff;
background:#111;
text-align:center;
line-height:30px;
}
</style>
<div class='testblock'>
<h1>Привет!</h1>
<p>Это надпись.</p>
<div class='somebox'>1111</div>
<div class='somebox'>1111</div>
<div class='somebox'>1111</div>
<!-- <div style='clear:both;'></div> -->
</div>
Примечание:
на одном ресурсе подсказали решение: добавить в родительский блок свойство display: inline-block;
soniclord, все равно спасибо.
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.