Столбцы одинаковой высоты с отступом - PullRequest
Новая
       1

Столбцы одинаковой высоты с отступом

1 голос
/ 17 августа 2010

Эй.У меня есть следующая разметка: 

<!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">
*
{
    padding: 0;
    margin: 0;
}

#container 
{
    padding-left: 200px;
    padding-right: 10px;
    overflow: hidden;
}

.column
{
    float: left;
    position: relative;
    text-align: justify;
    margin-bottom: -2000px;
    padding-bottom: 2005px;
}

#top 
{
    background-color: Red;
    height: 30px;
}

#content 
{
    background-color: Green;
    width: 100%;
    padding: 0 5px;
}

#left 
{
    background-color: Blue;
    width: 200px;
    right: 210px;
    margin-top: -30px;
    margin-left: -100%;
}
    </style>
</head>
<body>
    <div id="container">
        <div id="top">
            Lorem ipsum blah blah blah
        </div>
        <div id="content" class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus.
        </div>
        <div id="left" class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus.
        </div>
    </div>
</body>
</html>

Проблема в том, что левый столбец не отображается.Однако, если я уберу заполнение из #content (и вычту 10 из правого значения # left), оно будет работать, за исключением отсутствующего заполнения в #content.Есть ли способ исправить это без какой-либо дополнительной разметки?Я видел это решение:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Но я бы хотел, чтобы количество оберток было минимальным ...

Ответы [ 2 ]

0 голосов
/ 17 августа 2010

Этот сайт может вам помочь: http://www.cssplay.co.uk/layouts/threecol.html

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

Я думаю, он даже сделает работу50 евро в час.Я нанял его в прошлом, он был быстр.

0 голосов
/ 17 августа 2010

Я думаю, что ваша ссылка является скорее объяснением этого:

http://www.positioniseverything.net/articles/onetruelayout/equalheight

Хотя в этой ссылке более подробно обсуждаются предостережения и проблемы, касающиеся 3 столбцов равной высоты,

...