Расположение позиционирования, проблема с колонками

Question

Расположение позиционирования, проблема с колонками

0

У меня есть довольно простая страница, в которой есть два div (menu и content) внутри одного main div. Я не могу понять, как я могу продлить main высоту DIV в зависимости от высоты menu или content, я только в состоянии сделать это сейчас для content дел.

Вы можете увидеть это на скрипке здесь: http://jsfiddle.net/nLjnn/

Структура HTML:

<div class="main">
    <div class="menu"></div>
    <div class="content"></div>
</div>

CSS:

.main {
    width: 908px;
    padding: 10px 20px 20px 10px;
    background: red;
    -webkit-border-radius: 0px 5px 5px 5px;
    -moz-border-radius: 0px 5px 5px 5px;
    -khtml-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
    -moz-box-shadow: 0 1px 1px rgb(159, 159, 159);
  -webkit-box-shadow: 0 1px 1px rga(159, 159, 159);
    box-shadow: 0 1px 1px rgb(159, 159, 159);
    min-height: 300px;
    height: auto;
    margin-left: 1px;
    display: block;
    position: relative;
}
.menu {
    width: 170px;
    min-height: 570px;
    left: 10px;
    position: absolute;
    display: block;
    background: yellow;
}
.content {
    width: 728px;
    min-height: 450px;
    margin-left: 180px;
    display: block;
    position: relative;
    background: gray;
}

В menu div или content div может быть любое количество контента, поэтому мне нужно масштабировать высоту main div соответственно.

Dazvolt 16 апр. 2014, в 15:56

Источник

Теги:

html

css

3 ответа

3

Вам просто нужно покончить с абсолютным позиционированием в приведенном примере и сделать как .menu и .content inline-block;

.menu {
    display: inline-block;
    position: relative;
    width: 170px;
    min-height: 570px;
    background: yellow;
}
.content {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 724px;
    min-height: 450px;
    margin-left: 10px;
    background: gray;
}

Сообщите мне, если это не соответствует потребностям. скрипка здесь

chrismauck 16 апр. 2014, в 12:38

1

Использование float:left; на всех элементах должны работать

http://jsfiddle.net/nLjnn/3/

<div class="main">
    <div class="menu"></div>
    <div class="content"></div>
</div>


.main {
    padding: 10px 20px 20px 10px;
    background: red;
    -webkit-border-radius: 0px 5px 5px 5px;
    -moz-border-radius: 0px 5px 5px 5px;
    -khtml-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
    -moz-box-shadow: 0 1px 1px rgb(159, 159, 159);
  -webkit-box-shadow: 0 1px 1px rga(159, 159, 159);
    box-shadow: 0 1px 1px rgb(159, 159, 159);
    position: relative;
    float:left;
}
.menu {
    width: 170px;
    min-height: 570px;
    float:left;
    background: yellow;
}
.content {
    width: 728px;
    float:left;
    min-height: 450px;
    margin-left: 10px;
    background: gray;
}

Robert Verkerk 16 апр. 2014, в 12:26

Ещё вопросы

scx · Accepted Answer · 2014-04-16T11-45-00.000Z

Удаление

position:absolute,

добавление

display:inline-block;

и регулировка ширины с% должна устранить проблему. Надеюсь, это поможет вам немного. скрипка

Не забудьте выровнять по вертикали: top на одном или обоих рассматриваемых элементах div, так как в противном случае они не будут выровнены по верху и будут выглядеть разбитыми.
Это в скрипке, я забыл упомянуть об этом.