Как выровнять div-строки inline-block без вертикальных пробелов с помощью CSS? - PullRequest
Новая
       26

Как выровнять div-строки inline-block без вертикальных пробелов с помощью CSS?

2 голосов
/ 03 декабря 2011

У меня есть особая проблема, которую я пытаюсь решить с помощью CSS. Мой HTML-макет выглядит так: 

<div id="body">
    <div id="box1">lorem ipsum...</div>
    <div id="box2">lorem ipsum...</div>
    <div id="box3">lorem ipsum...</div>
    <div id="box4">lorem ipsum...</div>
</div>

и CSS это: 

div { display:inline-block;vertical-align:top }
#body { width:400px;outline:1px solid #eee }
#box1 { background-color:red;width:250px; }
#box2 { background-color:blue;width:150px }
#box3 { background-color:green;width:150px }
#box4 { background-color:yellow;width:150px }

Результат выглядит так:

what I've got now

Но мой желаемый результат должен выглядеть следующим образом. Мне сложно описать это словами, поэтому я только что загрузил этот графический макет, чтобы вы поняли, чего я хочу достичь. По сути, пустое пространство между первым и вторым рядом блоков должно исчезнуть, а текст в блоке № 4 должен «плавать» вокруг блока № 2. Я хочу только CSS-решение, если это возможно и не требует поддержки IE7 и ниже:

what I want

Вот jsFiddle для этого сценария: http://jsfiddle.net/HUxWZ/

Кто-нибудь может помочь, пожалуйста? Заранее спасибо.

1 Ответ

3 голосов
/ 03 декабря 2011

Я немного возился, это мой лучший снимок:

http://jsfiddle.net/HUxWZ/10/

И с помощью магии jQuery текст в желтом поле обтекает синий:

http://jsfiddle.net/HUxWZ/21/

...