Выравнивающий столбец блоков DIV отдельно от другого блока DIV - PullRequest
Новая
       0

Выравнивающий столбец блоков DIV отдельно от другого блока DIV

0 голосов
/ 26 ноября 2010


Я хочу выровнять блок div таким способом: 

+-----+------+
|first|second|
|     |      |
+     +------+
|     |third |
|     |      |
+-----+------+

Но следующий код выравнивает его по-другому: 

<html>
    <head>
        <style>
            .common
            {
                border: 1px solid black;
                float: left;
            }

            #first
            {
                background: red;
                height: 100px;
                width: 50px;
            }

            #second
            {
                background: green;
                height: 50px;
                width: 50px;
            }

            #third
            {
                background: yellow;
                height: 50px;
                width: 50px;
            }
        </style>
    </head>
    <body>
        <div class="common" id="first">first</div>
        <div class="common" id="second">second</div>
        <div class="common" id="third">third</div>
    </body>
</html>

Я не буду использовать абсолютныйпозиционирование.
Есть ли другой способ сделать это?

Спасибо за внимание.

Ответы [ 5 ]

1 голос
/ 26 ноября 2010

Самый простой способ сделать это с 4 контейнерами: 

+-----+------+
|first|second|
|     |      |
|     |      |
|     |      |
|     |      |
+-----+------+

затем создайте еще два внутри второго контейнера: 

+-----+--------+
|first|second  |
|     | +----+ |
|     | |3rd | |
|     | |    | |
|     | +----+ |
|     | |4th | |
|     | |    | |
|     | +----+ |
|     |        |
+-----+--------+

Float 1-го и 2-го. Не придавайте второму контейнеру никакого визуального стиля, просто разместите его. Поместите 3-й и 4-й контейнеры внутри 2-го по мере необходимости. Никаких дополнительных полей на «внутренних» контейнерах не будет, и они будут заполнять пространство второго, поэтому второй контейнер - действительно невидимое руководство, помогающее поместить их туда, куда они идут, только позиционируя.

Я предпочитаю этот метод, потому что он избегает любых изюминок полей, и все, что вам нужно сделать, чтобы отрегулировать положение обоих маленьких контейнеров (3-го и 4-го), это отрегулировать положение 2-го, они последовательно перемещаются вместе с ним .

1 голос
/ 26 ноября 2010

вы можете использовать обёртку div с фиксированной шириной и переполнением: скрыто, чтобы предотвратить падение

живой пример: http://jsbin.com/isuse4

Код: 

<!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>
<title></title>
<style type="text/css">
#wrapper {width:150px; overflow:hidden;}
.common {
    border: 1px solid black;
    float: left;
}
#first {
    background: red;
    height: 100px;
    width: 50px;
}
#second {
    background: green;
    height: 50px;
    width: 50px;
}
#third {
    background: yellow;
    height: 50px;
    width: 50px;
}
</style>
</head>

<body>
<div id="wrapper">
  <div class="common" id="first">first</div>
  <div class="common" id="second">second</div>
  <div class="common" id="third">third</div>
</div>
</body>
</html>
1 голос
/ 26 ноября 2010

Вот, пожалуйста, http://jsfiddle.net/4CD2s/

#first {
    background: green;
    float: left;
    height: 300px;
    width: 100px;
}
#second {
    background: grey;
    height: 100px;
    margin-left: 105px;
    width: 100px;
}
#third {
    background: grey;
    height: 100px;
    margin: 5px 0 0 105px;
    width: 100px;
}

<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
1 голос
/ 26 ноября 2010

Вы можете обернуть второе и третье в контейнер div и всплыть контейнер и первый. 

#first {
    float: left;
}

#container {
    float: left;
}

...

<div id="first></div>
<div id="container">
    <div id="second"></div>
    <div id="third"></div>
</div>
0 голосов
/ 26 ноября 2010

float first left

и укажите второй и третий поля ширины первого

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

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

...