Блог

Главная - Вопросы по программированию - Как изменить макет из таблицы в divs с правильной шириной и высотой?

Как изменить макет из таблицы в divs с правильной шириной и высотой?

#html #layout #width #css-tables

#HTML #Макет #ширина #css-таблицы

Вопрос:

Я познакомился с HTML около 10 лет назад, но почти не пользовался им до тех пор, пока около месяца назад. Оказывается, теперь я должен все делать по-другому (или делал все неправильно, не зная об этом раньше), и я пытаюсь придерживаться стандартов, но некоторые вещи меня сильно беспокоят.

Я слышал, что многие люди критикуют использование таблиц для верстки, например. Я действительно не знаю, почему (действительно ли таблицы такие плохие?), Но все же я пытался использовать divs вместо этого и, похоже, просто не могу заставить их работать должным образом. Я выделил свои проблемы в довольно наглядную, которая включает в себя некоторые вещи, которые я не смог сделать с divs (и некоторые, которые я даже не мог сделать с таблицами на самом деле).

Вот в чем проблема:

Мой вывод

Я много чего перепробовал, и, к сожалению, я даже не могу обобщить их здесь, потому что я не помню, но вот код с моими попытками заставить его работать:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Tests</title>
<style type="text/css">
body {height:100%;}
#container
{
    overflow: hidden;
    width:680px;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    border: 1px solid red;
}
#column_left
{
    float: left;
    width: 25%;
    height: 100%;
    margin: 0;
    text-align: right;
    border: 1px solid black;
}
#column_middle
{
    float: left;
    width: 49.2%;/*59.601562%*/
    height: 100%;
    margin: 0;
    text-align: center;
    border: 1px solid black;
}
#column_right
{
    float: left;
    width: 25%;
    height: 100%;
    margin: 0;
    border: 1px solid black;
}
.pad 
{
    margin: 10px;
    padding: 2px;
    border: 1px solid black;
}
</style>
</head>
<body style="margin:0;">
<div id="container">
    <div id="column_left">
        <div class="pad">
            Left Column Top<br/>
            <br/>
            Div only as long as content.<br/>
        </div>
        <div class="pad">
            Left Column Bottom<br/><br/>
            I want this DIV to stretch all the way down to the bottom of the container regardless of the lenght of the content.
        </div>
    </div>
    <div id="column_middle">
        <div class="pad">
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
            <p>Long Middle Content</p>
        </div>
    </div>
    <div id="column_right">
        <div class="pad">
            Right content<br/><br/>
            I want this DIV to stretch all the way down to the bottom of the container regardless of the lenght of the content.
        </div>
    </div>
</div>
</body>
</html>

Помимо основного вопроса, если вы обратите внимание на ширину среднего столбца, она не равна 50. Конечно, сначала я пробовал 50%, чтобы получить 100%, но по какой-то сумасшедшей причине все пошло наперекосяк:

Искаженный макет

Кто-нибудь знает почему?

Еще одна вещь, которую я не могу сделать с таблицами и даже не знаю, возможно ли это вообще: я хотел, чтобы весь макет был симметричным. То есть я хотел бы, чтобы более длинный боковой контент определял ширину своего div, а также другого div, в то время как средний div растягивается, чтобы вместить 100% страницы. Кто-нибудь знает, возможно ли это? Не уверен, действительно ли я буду использовать это в своем окончательном макете, но это меня озадачивает.

Извините, если вопрос глупый и, как оказалось, легко решаемый. Как я уже сказал, я новичок в правильном html / css. Приветствуется любая помощь.

Ответ №1:

Хорошо, я разобрался с частью этого. Ваши границы были в дополнение к указанной ширине в некоторых браузерах. Снизив ваш средний div до 49%, вы исправили, что правый div был помещен под ним в IE8 / IE7 / FF4. Вот это в действии: JsFiddle

Ответ №2:

Увеличил ширину контейнера с 680 до 750, он работает….