Лучший способ реализовать веб-сайт с тремя столбцами, используя теги <DIV>?[закрыто]

StackOverflow https://stackoverflow.com/questions/83279

  •  01-07-2019
  •  | 
  •  

Вопрос

Я разрабатываю веб-сайт с тремя столбцами, используя такой макет:

    <div id='left'   style='left:      0; width: 150px; '> ... </div>
    <div id='middle' style='left:  150px; right: 200px'  > ... </div>
    <div id='right'  style='right:     0; width: 200px; '> ... </div>

Но, учитывая свойство CSS «position» по умолчанию <DIV>'s является «статичным», мой <DIV>'s как и ожидалось, были показаны один под другим.

Поэтому я установил свойство CSS «позиция» на «относительное» и изменил свойство «верхнее» для «среднего» и «правого». <DIV>'s до -(минус) высота предыдущего <DIV>.Все работало нормально, но этот подход принес мне две проблемы:

1) Несмотря на то, что Internet Explorer 7 правильно отображает три столбца, вертикальная полоса прокрутки по-прежнему сохраняется, как если бы <DIV>'s были расположены один под другим, и после того, как контент закончился, остается много пустого пространства.Мне бы хотелось этого.

2) Высота этих элементов является переменной, поэтому я не знаю, какое значение установить для каждого. <DIV>свойство 'top';и я бы не хотел его жестко закодировать.

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

Это было полезно?

Решение

Если вы еще не выписались Список врозь вам следует это сделать, поскольку он содержит несколько отличных руководств и рекомендаций по дизайну веб-сайтов.

Эта статья в частности, должно помочь вам.

Другие советы

Давать BluePrint CSS попытка.Начать работу с ним действительно просто, но он достаточно мощный для большинства приложений.

Понятные уроки и примеры.Имеет библиотеку типографики, которая дает достойные результаты прямо из коробки.

Безусловно, самый простой способ сделать 3 столбца (или любое другое количество столбцов, странным образом разделенных по доступному пространству) - это ЮИ сетки.Eсть YUI Grids Builder чтобы дать вам базовый макет.Ниже приведен базовый макет шириной 750 пикселей с тремя столбцами (разделён на 1/3, 1/3 1/3) и левой боковой панелью шириной 160 пикселей.Изменить его на другую ширину, настройки боковой панели и разделение столбцов очень просто.

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2    "http://www.w3.org/TR/html4/strict.dtd"> 
3   <html> 
4   <head> 
5      <title>YUI Base Page</title> 
6      <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7   </head> 
8   <body> 
9   <div id="doc" class="yui-t1"> 
10     <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11     <div id="bd"> 
12      <div id="yui-main"> 
13      <div class="yui-b">    <div class="yui-gb"> 
14          <div class="yui-u first"> 
15      <!-- YOUR DATA GOES HERE --> 
16              </div> 
17          <div class="yui-u"> 
18      <!-- YOUR DATA GOES HERE --> 
19              </div> 
20          <div class="yui-u"> 
21      <!-- YOUR DATA GOES HERE --> 
22              </div> 
23      </div> 
24  </div> 
25      </div> 
26      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
27       
28      </div> 
29     <div id="ft">Footer is here.</div> 
30  </div> 
31  </body> 
32  </html>

Существует ряд примеров и библиотек, по которым вы можете выполнить поиск — пара уже перечислена (обязательно прочитать A List Apart).

Я использовал Библиотека пользовательского интерфейса Yahoo (YUI) на моих последних нескольких сайтах, и мне это очень нравится.Yahoo полностью поддерживает его, его легко понять и использовать.Вот там CSS для сеток, что позволяет форматировать страницу на любое количество столбцов и разделов.

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

Мне нравится Сетка 960.Это легкий и простой в использовании CSS, который делит экран на 12 (или 16) столбцов.Вы можете использовать его для дизайна из 3 колонок и соответствующим образом выровнять остальной контент.

Попробуйте переместить элементы div влево, чтобы они все находились на одной линии — при условии, что места достаточно.

Для фиксированного столбца просто установите высоту:xxxpx, и они станут равными.

Использовать это Генератор макетов из 3 столбцов пытаться.

Этот код работает на моем компьютере с IE 8, Chrome, Firefox. 

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);">
        <a href="http://abv.bg"> Column1 </a> </div>
        <div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);">
        <font color="#FFFFFF">Column 2 </font> </div>
        <div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);">
        <a href="http://abv.bg"> Column 3 </a> </div>
    </body>
</html>

Во-первых, относительное позиционирование делает то, что вы описали:он резервирует место в исходном месте, но отображает смещение DIV на некоторую величину.

Если вы разместите DIV в плавающем положении, они будут располагаться слева направо, но это может вызвать проблемы.

Разметка из трех столбцов с использованием CSS довольно сложна.Посмотри на [http://www.glish.com/css/7.asp]

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top