Список тегов DIV в столбцах - PullRequest
Новая
       2

Список тегов DIV в столбцах

0 голосов
/ 06 июня 2010

Я хочу разместить эти изображения в 3 столбцах (см. Ниже). Что такое HTML-треска для этого?

[ОБРАЗ] [ОБРАЗ] [ОБРАЗ] 
<div class="rparticle ">
    <div class="articleEntry Normal"><a href="[LINK]">[IMAGE]</a></div>
    <div><a href="[LINK]">[TITLE]</a></div>
</div>

.rparticle 
{
 display:inline;
    clear: both;
    text-align: center;
    margin-bottom : 25px;
 width:190px;
}

Ответы [ 2 ]

1 голос
/ 06 июня 2010

Позвольте им плавать направо или налево. 

...
<head>
    <style>
        .rparticle{
           float: left;
           width: 33%;
           text-align: center;
           margin-bottom : 25px;
        }
        .clear{
           clear: both;
        }
    </style>
</head>
<body>
    <div class="rparticle">
        <div class="articleEntry Normal"><a href="[LINK]">[IMAGE1]</a></div>
        <div><a href="[LINK]">[TITLE]</a></div>
    </div>
    <div class="rparticle">
        <div class="articleEntry Normal"><a href="[LINK]">[IMAGE2]</a></div>
        <div><a href="[LINK]">[TITLE]</a></div>
    </div>
    <div class="rparticle">
        <div class="articleEntry Normal"><a href="[LINK]">[IMAGE3]</a></div>
        <div><a href="[LINK]">[TITLE]</a></div>
    </div>
    <br class="clear" />
</body>
...
0 голосов
/ 06 июня 2010

Это возможно только в том случае, если контейнер и дочерние элементы имеют width, а дочерние элементы - float ed left. Вот копия 'n'paste'n'runnable SSCCE , которая демонстрирует это. 

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2982423</title>
        <style>
            #container {
                width: 750px;
            }
            #container .image {
                float: left;
                width: 250px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"></div>
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"></div>
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"></div>
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"></div>
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"></div>
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...