Мне несколько раз говорили, что я не должен использовать таблицы для разработки макетов, но я постоянно возвращаюсь к ним, когда не могу понять, как что-то сделать.

Мне нужно создать макет из двух столбцов. Левый столбец имеет ширину 300 пикселей, а правый столбец занимает остальную часть ширины на странице. Я не могу понять, как правильно сделать это с простым HTML, и я даже не могу понять, как это сделать с таблицей.

Чтобы правый столбец занимал оставшуюся часть ширины, мне кажется, что мне нужно было бы указать ширину левого столбца в процентах, чтобы ширина правого столбца была на 100% меньше процента левого столбца. Но мне нужно, чтобы левый столбец был точно 300px.

Единственное, что я могу думать, это вычислить ширину правильного столбца во время выполнения с помощью JS. Любые идеи, как я могу сделать это без таблиц и / или без Javascript?

0
Chev 1 Фев 2013 в 01:01

3 ответа

Лучший ответ

Пока у нас нет макета flexbox, я буду использовать абсолютное позиционирование:

HTML:

<div id="container">
    <div id="left">left one</div>
    <div id="right">right one</div>
</div>

CSS:

#container {
    position: relative;
    height: 150px;
}

#left, #right {
    position: absolute;
    top: 0px; 
    bottom: 0px;
}

#left {
    left: 0px; 
    width: 300px;
    background: red;
}

#right {
    left: 300px; 
    right: 0px;    
    background: green;
}

jsfiddle

Есть альтернативы, если вы хотите, чтобы макет адаптировался к содержимому, а не к контейнеру. Если ваш правый столбец содержит больше контента, вы можете использовать:

#container {
    position: relative;
}

#left {
    position: absolute;
    left: 0px; 
    width: 300px;
    top: 0px; bottom: 0px;
    background: red;
}

#right {
    margin-left : 300px; 
    background: green;
}

jsfiddle

Если в левой колонке есть больше контента, используйте:

#container {
    position: relative;
}

#left {
    width: 300px;
    background: red;
}

#right {
    position: absolute;
    left: 300px; 
    right: 0px;
    top: 0px; bottom: 0px;
    background: green;
}

jsfiddle

1
Jan 31 Янв 2013 в 21:44

<div> элементы в основном заполняют ширину своего контейнера или то, что от него осталось. Так что если у вас есть div шириной 300px, то рядом с ним стоит div без указания ширины, 2-й div заполнит остальную часть контейнера.

1
Madbreaks 31 Янв 2013 в 21:05

Установите для левого столбца значение 300px, для правого столбца - значение 100% ... готово. Чтобы избежать кросс-браузерной странности, перейдите по ссылке Мэтта Болла на ... http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm. Он использует таинственную 2-ую обертку, которую я бы посчитал ненужной, но ребенок шагает :)

Как только вы окажетесь в обёртке, чтобы получить высоту столбца = вам нужно установить минимальную высоту на 100%, я считаю. Вы можете настроить свойство css переполнения, чтобы справиться с любым переполнением текста. Довольно простые вещи, я помню, как чертовски долго находил, как делать равные столбцы, обертка - это ключ. Кроме того, не используйте JS для этого, люди, которые используют JS, либо делают что-то более продвинутое, либо совершенно не знакомы с html / css.

0
RandomUs1r 31 Янв 2013 в 21:10