Как я могу выровнять DIV рядом друг с другом шириной 1000 пикселей? - PullRequest
Новая
       1

Как я могу выровнять DIV рядом друг с другом шириной 1000 пикселей?

1 голос
/ 22 октября 2010

Кажется, я не могу правильно всплыть в DIV.То, чего я пытаюсь достичь, - это возможность разместить 4 DIV рядом друг с другом.Каждый выровнен по верху в 0px и разнесен примерно на 30 пикселей, но я не могу использовать абсолютное позиционирование.Размеры DIV настраиваются в зависимости от размера экрана.Итак, мне нужно позиционировать DIV относительно.Когда я пытаюсь запустить DIV, они просто сидят друг на друге.

Вот что у меня есть. 

<head>
<style type="text/css">
.b1{
 position:relative;
 margin-left:50px;
 float:left;
 width:1000px;
 height:200px;
 background-color:#000;
}
.b4{
 position:relative;
 top:0px;
 left:30px;
 float:right;
 width:1000px;
 height:200px;
 background-color:#000;
}
</style>
</head>

<body>
<div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b4"></div>
</body>

Ответы [ 3 ]

0 голосов
/ 22 октября 2010

Проблема в вашем окне просмотра. Когда вы перемещаете серию элементов, они переносятся на следующую строку, если область просмотра недостаточно широка, чтобы отображать их в одной строке. Чтобы понять, что я имею в виду, уменьшите ширину .b1 до 100.

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

С стилем родительского контейнера: 

overflow: scroll;
0 голосов
/ 22 октября 2010

Добавьте обертку и сделайте обертку достаточно большой, чтобы соответствовать размеру ваших DIV: 

<div class="wrapper">
   <div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b4"</div>
</div>


.wrapper {
    width:3500px;
}
0 голосов
/ 22 октября 2010

Плавающие элементы будут складываться, когда их контейнер недостаточно широк, чтобы выровнять их по горизонтали. Поместите четыре деления в контейнер, достаточно широкий, чтобы вместить их все (предположительно, 4000 пикселей + любой отступ и отступ, которые вы хотите на каждом). В своем вопросе вы упомянули 30px, но в вашем примере используется отступ в 50px. Вот пример с полем в 50px. http://jsfiddle.net/brianflanagan/9ZUw5/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...