1

Привет всем. Вот в чём вопрос. Есть у меня вот такой вот div http://jsfiddle.net/Ploff_me/wB7Bj/embedded/result/ как мне сделать так, что б див с красным бордером не имел свободного места внутри? Что б его ширина вмешала ровно 3 внутренних дива и всё? Размеры и количество внутренних дивов будет меняться, фиксированный размер не подходит. Желательно всё это провернуть без js

коды: http://jsfiddle.net/Ploff_me/wB7Bj/embedded/

.main {
    border: 1px solid red;
}
.block {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
}
<div class="main">
    <div class="block">uno</div>
    <div class="block">dos</div>
    <div class="block">tre</div>
    <div style="clear: left;"></div>
</div>

2 ответа 2

1

Попробуйте так http://jsfiddle.net/wB7Bj/2/.

.main {
    border: 1px solid red;
    width: auto;
    height: 100px;
    display: inline-block;
}
.block {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
}
<div class="main">
    <div class="block">uno</div>
    <div class="block">dos</div>
    <div class="block">tre</div>
    <div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>quattro

1
  • Увы, тоже не подходит. При сужении экрана и переносе элементов на другую строку не работает. 17 окт 2013 в 11:50
0

Не уверен на счет кроссбраузерности, но вот такое решение работает.

.main{
border: 1px solid red;
display: inline-block;
}
2
  • .main{ border: 1px solid red; display: inline-block; } не подходит. Не работает, если элементы переносятся на другую строку. 17 окт 2013 в 11:49
  • jsfiddle.net/f9vNx может так подойдет? перенос работает при сужении окна браузера и при ручном переносе.
    – iterq
    17 окт 2013 в 11:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.