@pilotishe00

Как последовательно расположить DIV'ы в две колонки, используя COLUMNS?

Доброго времени суток! Столкнулся со следующей проблемой.
Несколько DIV'ов должны быть последовательно размещены по двум колонкам при помощи параметра COLUMN у родительского контейнера. Последовательности, в некотором смысле, я добился. Но! Теперь, каким-то абсолютно неведомым мне образом, конечный DIV из первой колонки делится на несколько частей. Одна его часть остается в первой колонке, оставшееся же перемещается во вторую. Помогите побороть недуг.
Код прилагается.
HTML:
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="test3.css"/>
        <meta charset="utf-8">
	<title>Test</title>
    </head>
    <body>
        <div id="wrapper">
            <div id="columns">
                <div class="block">
                    <img src="img/image.jpg"/>
                    <p class="n_head">Header</p>
                    <p class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices mauris eu tellus adipiscing, eu commodo purus porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam facilisis adipiscing lectus a placerat. Nulla pulvinar venenatis quam, sed convallis tellus pellentesque nec. Fusce ultrices, est et sodales interdum, diam turpis iaculis urna, sed rhoncus urna nisi quis mi. Sed odio ligula, sodales vitae erat eget, sodales facilisis nulla. In non volutpat elit. Nullam consequat eu felis ac fermentum. Cras tristique volutpat lectus. Sed a diam eget magna pellentesque sagittis a non sapien. Nulla a purus in odio cursus fringilla. Nunc sed luctus nulla. Sed elementum ipsum vitae purus scelerisque tempor.</p>
                    <p class="date">Date</p>
                </div>
                <div class="block">
                    <img src="img/image.jpg"/>
                    <p class="n_head">Header</p>
                    <p class="info">Phasellus a tempor nisi, nec sodales nunc. Donec condimentum sed neque ut hendrerit. Donec ultricies, nibh nec scelerisque porta, tellus urna sagittis magna, eu auctor libero mauris ac lorem. Aliquam lacinia erat ullamcorper, accumsan quam in, fermentum diam. Proin quis eros diam. Mauris sed dictum magna. Maecenas non orci non diam volutpat accumsan ut mollis odio. Praesent congue, augue et ultricies cursus, sapien augue rhoncus odio, nec dapibus arcu mi vitae erat. Cras at ipsum quis est luctus aliquet mollis quis eros. Morbi consectetur venenatis pellentesque. Suspendisse rutrum dolor turpis, quis faucibus magna sodales at. Vestibulum convallis lectus sed libero dictum scelerisque nec vel dui. Fusce sit amet adipiscing nunc. Curabitur tempus ipsum non lorem lacinia ullamcorper. Duis quis dolor non sapien tincidunt suscipit at eget purus.</p>
                    <p class="date">Date</p>
                </div>
                <div class="block">
                    <img src="img/image.jpg"/>
                    <p class="n_head">Header</p>
                    <p class="info">Vestibulum sed laoreet eros, at accumsan ligula. Suspendisse euismod sagittis laoreet. Ut at enim sapien. Vivamus a sollicitudin dui, quis tincidunt massa. Nunc consectetur vehicula rutrum. Donec ac scelerisque justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque laoreet ultrices dui eleifend tincidunt. Suspendisse imperdiet libero at ullamcorper laoreet. Phasellus eu felis scelerisque, mollis nisl vel, sagittis arcu. Nunc sapien justo, dignissim eget porttitor ac, cursus viverra erat. Curabitur ornare accumsan lorem at viverra.</p>
                    <p class="date">Date</p>
                </div>
                <div class="block">
                    <img src="img/image.jpg"/>
                    <p class="n_head">Header</p>
                    <p class="info">Text</p>
                    <p class="date">Date</p>
                </div>
                <div class="block">
                    <img src="img/image.jpg"/>
                    <p class="n_head">Header</p>
                    <p class="info">Text</p>
                    <p class="date">Date</p>
                </div>
                <div class="block">
                    <img src="img/image.jpg"/>
                    <p class="n_head">Header</p>
                    <p class="info">Text</p>
                    <p class="date">Date</p>
                </div>
            </div>                    
        </div>
    </body>
</html>
CSS:
body {
    font-family: Arial;
    background-color: #eaeaea;
    margin: 0px auto;
    max-height: 100%;
}

#wrapper {
    position: relative;
    width: 720px;
    /*max-height: 100%;*/
    margin: 20px auto;
    width: 760px;
    height: 100%;
    background-color: white;
    overflow: hidden;
    /*overflow: hidden;*/
}

#columns {
    margin: 20px;
    -webkit-column-count: 2;
	-webkit-column-gap: 20px;
	-webkit-column-width: 350px;
	-moz-column-count: 2;
	-moz-column-gap: 20px;
	-moz-column-width: 350px;
	column-count: 2;
	column-gap: 20px;
	column-width: 350px;
}

.block {
    /*width: 348px;
    height: 100%;*/
    font-family: Times;
    font-size: 14px;
    color: #333;
    float: left;
    border-bottom: 1px solid #999;
    margin-bottom: 20px;
}

.block img {
    margin-bottom: 5px;
    width: 348px;
}

p {
    margin: 5px 0px;
}

.n_head {
    font-size: 28px;
    font-weight: bolder;
    color: #333;
}

.info {
    font-size: 16px;
}

.date {
    color: gray;
    font-size: 12px;
    font-style: oblique;
    margin-bottom: 10px;
}
P.S.: Не ругайте сильно за, вероятно, кривой код. Я не волшебник, только учусь.
За советы по оптимизации этого деяния буду БЕСКОНЕЧНО БЛАГОДАРЕН!
  • Вопрос задан
  • 2971 просмотр
Пригласить эксперта
Ответы на вопрос 1
Aligatro
@Aligatro
Turn food and coffee into software...
Единственное, что приходит на ум - это задать фиксированную высоту для класса инфо и использовать overflow: hidden.

Типа такого:
.info {
font-size: 16px;
overflow: hidden;
height: 200px;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы