Как я могу создать этот конкретный макет, используя HTML и CSS? - PullRequest
Новая
       10

Как я могу создать этот конкретный макет, используя HTML и CSS?

1 голос
/ 27 января 2011

Как я могу сделать это в HTML / CSS (без javascript !!):

enter image description here

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

Это должно работать только в Google Chrome.

Я просто не могу понять это.

Ответы [ 6 ]

2 голосов
/ 27 января 2011

@ BMASTER

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

http://jsfiddle.net/2pXpN/

Preview of the layout

Самым сложным для меня было заставить текст диктовать высоту всего этого - но после того, как я перестал пытаться использовать поплавки, все получилось;)

Попробуйте добавить еще текст и т.д .. это должно работать!

Редактировать: Я не был уверен, что вам нужен «верхний колонтитул» сверху, но я поставил его здесь: http://jsfiddle.net/bHhd8/. * Обратите внимание, что он находится вне оболочки, в противном случае боковые колонны становятся слишком высокими!

1 голос
/ 27 января 2011

Изучив другие ответы, которые, казалось, не совсем получили то, что вы хотели, я решил добавить свой jsfiddle ответ .

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

Столбцы очищаются с помощью #footer,который в настоящее время ничего не содержит, но помогает расширить размер страницы за пределы оболочки.

Элемент #page относительно позиционирован, так что абсолютно позиционированные дочерние элементы будут располагаться относительно него, а не body.

1 голос
/ 27 января 2011

Так как высота ящиков для боеприпасов фиксирована, вы можете расположить их абсолютно.Для нижнего правого.Это должно быть само за себя: 

.orange-box {
  width:33%;
  height:100px;
  position:absolute;
}

.orange-box.top-left-1 { top:0; left:0; }
.orange-box.top-left-2 { top:100px; left:0; }
.orange-box.bottom-right { bottom:0; right:0; }

Синяя область должна быть еще одним div с 

width:33%;
margin:0 auto
1 голос
/ 27 января 2011

В этом есть что-то, что мне не нравится, но оно работает. 

<!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>Test</title>
    <style type="text/css">
        body
        {
            padding: 0;
            margin: 0;
        }

        #content
        {
            background-color: #cccccc;
            min-height: 100%;
        }

        #header
        {
            height: 40px;
            background-color: #666666;
        }

        #left
        {
            float: left;
            width: 33%;
        }

        #mid
        {
            margin: 0 33%;
            background-color: #6666ff;
        }

        #right
        {
            float: right;
            width: 33%;
            margin-top: -50px;
        }

        .fixedHeight
        {
            height: 50px;
            background-color: #ffff33;
        }

        #left .fixedHeight
        {
            margin-right: 10px;
            margin-bottom: 10px;
        }

        #right .fixedHeight
        {
            margin-left: 10px;
        }

        .clear
        {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="header">
        header
    </div>
    <div id="content">
        <div id="left">
            <div class="fixedHeight">
                fixed
            </div>
            <div class="fixedHeight">
                fixed
            </div>
        </div>
        <div id="mid">
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
        </div>
        <div class="clear"></div>
        <div id="right">
            <div class="fixedHeight">
                fixed
            </div>
        </div>
    </div>
</body>
</html>
0 голосов
/ 27 января 2011

Попробуйте использовать CSS-сетки, например жидкостное расширение для чертежа .Это исправит все проблемы с шириной.Тогда для нижнего делителя вам просто понадобятся некоторые настройки абсолютного позиционирования, и все должно быть в порядке.

0 голосов
/ 27 января 2011

Вот хорошее начало: http://matthewjamestaylor.com/blog/perfect-3-column.htm

После этого ваши дивы, требующие фиксированной высоты, не должны много работать.

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

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

...