Блог

У меня очень классический макет, которого я добиваюсь довольно часто, и я всегда импровизирую, как я могу это сделать. Я разделил три div на картинке (красные линии). Моя проблема всегда связана с правым нижним: даже если я исправлю размер левого Div, я помещаю верхний div как float:right. Мне все еще приходится обманывать проблемный div и играть с отрицательными полями.

Для этого примера это довольно просто, поскольку два div (левый и верхний) имеют фиксированные размеры, но я хотел бы иметь шаблон для гибких гибких макетов.

Я уже искал в Интернете, у каждого человека есть свое собственное решение, но я не нахожу никакого четкого чистого вкусного решения.

есть идеи?

Ожидаемое поведение :

1. на самом деле нет фиксированных размеров, вообще нет размеров (пусть элементы занимают нужное им место)
2. если справа осталось свободное место, не переходите на новую строку.
3. если места больше нет, перейдите на новую строку, но полностью перейдите влево (как и ожидалось с display:inline-block помощью)

Вот пример jsfiddle:

даже если для div достаточно места (по ширине) id='2' , он переходит на новую строку (потому display:inline-block что пытается добавить этот div справа от id='2' , и когда он не находит, он переходит на новую строку вместо перехода справа от id='1' )

http://jsfiddle.net/zhamdi/zu5sU/6/

Я знаю, что для этого есть js-сетки, например http://gridster.net /

Но я не хочу, чтобы что-то перетаскивалось, просто простой адаптируемый макет

Быстрый способ сделать это — использовать макет столбца.

Вы бы поместили оба раздела в свои собственные, содержащие divs:

Пример JSFiddle

HTML

 <div class="container">
    <div class="column">
        <div class="content one">
        </div>
    </div>
    <div class="column">
        <div class="content two">
        </div>
        <div class="content two alt">
        </div>
    </div>
</div>
  

CSS

 .column{
    float: left;
}
.content{
    width: 100px;
}
.content.one{
    height: 200px;
    background: red;
}
.content.two{
    height: 100px;
    background:blue;
}
.content.two.alt{
    background:green;
}