Позиционирование 3 делений таким образом, чтобы они выглядели так, как будто они помещены в строку таблицы из 3 столбцов

Question

Раньше я использовал <table>, чтобы разделить макет моей страницы на 3 части: левую боковую панель, правую боковую панель и главную центральную панель.Теперь, узнав о недостатках чрезмерного / неправильного использования <table>, я хочу избегать использования таблиц для этой цели, и я собираюсь стилизовать эти 3 div с таким образом, чтобы они выглядели как 3 столбца <table> row.

Любые входные данные о том, как я могу достичь 3 div с в одном ряду, будут высоко оценены.

В настоящее время все мои три div с показаны в линеаризованном виде.мода, одна за другой.

Answer 1

Может быть, что-то проще, а как насчет:

HTML:

<div id="main">
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>

CSS:

#main{
    margin: 0 auto 0 auto;
    width: 960px; /*just an example*/
}
#main div{
    float: left;
    width: 320px; /* a third of the main width*/
}

Надеюсь, это поможет вам.

Answer 2

Обычно боковые панели имеют фиксированную ширину, а область содержимого middel занимает остальное пространство. Учитывая это, вот лучший подход:

<style>
#left {
    width:200px;
    float:left;
} #right {
    width:200px;
    float:right;
} #main {
    margin:0px 200px;
}
</style>

<div id="container">
  <div id="left">content</div>
  <div id="right">content</div>
  <div id="main">content</div>
</div>

Измените размер окна, и все хорошо.

Рабочая JSFIDDLE: http://jsfiddle.net/7ayqe/

Answer 3

Как-то так должно начаться:

<div>
    <div class="column">column one</div>   
    <div class="column">column two</div>   
    <div class="column">column three</div>
    <div class="last"></div>
</div>


.column { float: left; padding: 5px }
.last { clear: left}

Здесь - живой пример

Answer 4

<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="clear"></div>

CSS:

.col1 {
   float:left;
   width:250px;
}

.col2 {
   float:left;
   width:600px;
}

.col3 {
   float:left;
   width:20px;
}

.clear {
   clear:both;
}

Answer 5

Дайте им свойства "float: left" и соответствующую ширину, чтобы получить желаемый размер.

Пример (я знаю, что это встроенные стили, используемые только для демонстрационных целей):

<div id="left-sidebar" style="width:30%;float:left"><!--Left Sidebar--></div>
<div id="content" style="width:50%;float:left"><!--Content--></div>
<div id="right-sidebar" style="width:20%;float:left"><!--Right Sidebar--></div>