Сложное обтекание div-ов

nikolay2011 · September 23, 2011

Здравствуйте.

Столкнулся со следующей проблемой с обтеканием div-ов.

На картинках ниже приведено, что есть и что нужно получить.

Это у нас есть:

(http://itmages.ru/image/view/287959/d5fb3475)

А вот так надо:

(http://itmages.ru/image/view/287960/4a7d5e0b)

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.news_main{
    font-weight:normal;
    text-align:left;
    padding-top: 3px;
    padding-bottom: 7px;
}

.news_box{
    text-align: left;
    vertical-align: top;
    padding: none;
    height: auto;
    width: 700px;
    margin: 0 auto;
}
.news_box:after{
    content:'';
    display:block;
    clear:both;
}

.news_box .text {
    padding-top: 7px;
}

.news_box .events_block {
    float:right;
    text-align: left;
    vertical-align: top;
    height: auto;
    width: 250px;
    padding: 0px;
    margin-left: 7px;
    margin-bottom: 5px;
    border:1px solid black;
}

.news_box .events_block .text {
    padding: 3px;
}

.news_box .events_block:after {
    content: '';
    display: block;
    clear: both;
}

.news_box .caption {
    text-align: center;
    font-weight: bold;
}

.div5 {
    text-align: left;
    vertical-align: top;
    padding: 3px;
    padding-left: 5px;
    height:auto;
}
.div5:after {
    content:'';
    display:block;
    clear:both;
}

.div_img {
    margin-right:7px;
    margin-bottom:7px;
    float:left;
    text-align: left;
    vertical-align: top;
    height: auto;
}
.div_img:after {
    content:'';
    display:block;
    clear:both;
}
</style>
</head>

<body>
<div class="news_box">

<div class="caption">Caption1</div>

<div class="text">

    <div class="events_block">
        <div class="caption">Caption2</div>
            <div class="text">
		- text2 <br>
		- text2 <br>
		- text2 <br>
		- text2 <br>
            </div>
        <div class="caption">Caption3</div>
            <div class="text">
		- text3 <br>
		- text3 <br>
		- text3 <br>
		- text3 <br>
            </div>
    </div>

    <div class="news_main">
	Title1<br>
        <div class="div5">
            <div class="div_img">
                <img src="http://www.google.ru/images/srpr/logo3w.png" alt="image" width="100px">
            </div>
	Some long text here.Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here.  
	</div>
    </div>

    <div class="news_main">
	Title2<br>
        Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image.
    </div>

    <div class="news_main">
	Title3<br>
	3. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image.
    </div>

</div>


</div>

</body>
</html>

Проблема заключается в том, что при вставке картинки, которая обтекается текстом, все идущие дальше записи начинаются только после окончания правого блока. Если картинки нет, то все в порядке.

Помогите, пожалуйста, разобраться и сделать правильное обтекание.

Если это критично для верстки, хочу обратить внимание на следующее: блок справа может быть произвольной высоты, а слева могут идти подряд несколько записей с картинками.

Заранее всем откликнувшимся огромное спасибо!

psywalker · September 24, 2011

Лови дружище

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.news_main{
    font-weight:normal;
    text-align:left;
    padding-top: 3px;
    padding-bottom: 7px;
}

.news_box{
    text-align: left;
    vertical-align: top;
    padding: none;
    height: auto;
    width: 700px;
    margin: 0 auto;
}
.news_box:after{
    content:'';
    display:block;
    clear:both;
}

.news_box .text {
    padding-top: 7px;
}

.news_box .events_block {
    float:right;
    text-align: left;
    vertical-align: top;
    height: auto;
    width: 250px;
    padding: 0px;
    margin-left: 7px;
    margin-bottom: 5px;
    border:1px solid black;
}

.news_box .events_block .text {
    padding: 3px;
}

.news_box .events_block:after {
    content: '';
    display: block;
    clear: both;
}

.news_box .caption {
    text-align: center;
    font-weight: bold;
}

.div5 {
    text-align: left;
    vertical-align: top;
    padding: 3px;
    padding-left: 5px;
    height:auto;
}
.div5:after {
    content:'';
    display:block;
    clear:both;
}

.div_img {
    margin-right:7px;
    margin-bottom:7px;
    float:left;
    text-align: left;
    vertical-align: top;
    height: auto;
}
.div_img:after {
    content:'';
    display:block;
    clear:both;
}
</style>
</head>

<body>
<div class="news_box">

<div class="caption">Caption1</div>

<div class="text">

    <div class="events_block">
        <div class="caption">Caption2</div>
            <div class="text">
                - text2 <br>
                - text2 <br>
                - text2 <br>
                - text2 <br>
            </div>
        <div class="caption">Caption3</div>
            <div class="text">
                - text3 <br>
                - text3 <br>
                - text3 <br>
                - text3 <br>
            </div>
    </div>
    <div class="news_block" style="overflow: hidden;">
    <div class="news_main">
        Title1<br>
        <div class="div5">
            <div class="div_img">
                <img src="http://www.google.ru/images/srpr/logo3w.png" alt="image" width="100px">
            </div>
        Some long text here.Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here.  
        </div>
    </div>

    <div class="news_main">
        Title2<br>
        Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image.
    </div>

    <div class="news_main">
        Title3<br>
        3. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image.
    </div>
	</div>
</div>


</div>

</body>
</html>

nikolay2011 · September 24, 2011

psywalker, Спасибо большое!

А не подскажешь, пожалуйста, как еще сделать, чтобы после окончания блока "<div class="events_block">" текст из левой колонки шел на всю ширину. Вот так: (подчеркнул зеленым)

psywalker · September 24, 2011

Ну это тогда тебе просто нужно сделать обычное обтекание.

nikolay2011 · September 24, 2011

Ну это тогда тебе просто нужно сделать обычное обтекание.

У меня с этим вот как раз и возникла проблема, которую я описал в самом верхнем сообщении - при добавлении картинки следующая запись появляется только после блока справа. Если картинку убрать, то все показывается правильно..

—-

А, вот. Получилось!

Сделал так


    <div class="news_block">
    <div class="news_main" style="overflow: hidden;">

Спасибо большое за помощь!

Проблема решена.

Edited September 24, 2011 by nikolay2011

Sign In

Сложное обтекание div-ов

Question

nikolay2011

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

nikolay2011

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

nikolay2011

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information