Как я могу расположить несколько делителей рядом? - PullRequest
Новая
       18

Как я могу расположить несколько делителей рядом?

3 голосов
/ 22 марта 2011

У меня есть несколько div, которые содержат плавающее изображение и неупорядоченный список. Я хочу, чтобы оба они были расположены рядом на странице.

Проблема в том, что, когда div пересекают страницу, все разваливается. Изображения справа начинают опускаться все ниже и ниже, а элементы списка - все выше и выше. Вот что я сделал. 

    .imageleft  {
    float: left;
    margin-left: 0;
    margin-top: 0;
}

.container-right {
display:inline;
    padding-bottom: 10px;
    width: 500px;

}

.container-left {

    float:left;
    padding-bottom: 10px;
    width: 500px;

}


    <div class="inline">
        <div class="container-left">
            <img alt="Image info" class="imageleft" src="someimage.png" />
            <h3>
                Title</h3>
            <ul>
                Sub title:
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>
        </div>
        <div class="container-right">
            <img alt="Blah blah" class="imageleft" src="/another-image.png" />
            <h3>
                Title</h3>
            <ul>
                Sub heading
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>
        </div>
    </div>

Я пытался добавить div вокруг 2 div с, но, похоже, это не помогло. Как я могу предотвратить это нежелательное поведение?

Спасибо за любые советы!

Ответы [ 2 ]

6 голосов
/ 22 марта 2011

Вы имеете в виду, как это http://jsfiddle.net/efVjj/

2 голосов
/ 22 марта 2011

Вам действительно нужен только класс .imageleft.Примените к обоим элементам div, и все готово.

Вот код (я добавил границу, чтобы обозначить элементы div): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.imageleft  {
    float: left;
    margin-left: 0;
    margin-top: 0;
    border:1px solid #000;
}
</style>
<title>Untitled Document</title>
</head>
<div class="imageleft">
<img alt="Image info" class="imageleft" src="someimage.png" />
            <h3>
                Title</h3>
            <ul>
                Sub title:
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>

</div>
<div class="imageleft">
<img alt="Blah blah" class="imageleft" src="/another-image.png" />
            <h3>
                Title</h3>
            <ul>
                Sub heading
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>

</div>
<body>
</body>
</html>
...