Нужен универсальный div css, который не перекрывается (как таблица)

Question

Я пытаюсь использовать div вместо таблиц для оформления стилей вокруг моего контента. Контент может быть любого размера и должен позволять браузеру изменять размер до любой степени Нужен цвет фона и рамки для содержания . Это прекрасно работает с таблицами. Как заставить div работать так же?

Примечание: я добавил "_", потому что мои неразрывные пробелы терялись.

Пример страницы

Образец изображения

_{(источник: c3o.com )}

Содержание:

<style type="text/css">
    div.box, table.box
    {
        padding: 10px 1000px 10px 10px;
    }

    div.box-header, td.box-header
    {
        border:  solid  1px  #BBBBBB ;
        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    }   

    div.box-body, td.box-body
    {
        padding: 6px;
        border:  solid  1px  #BBBBBB ;
        border-top: none;
    }
</style>


<div class="box">
    <div class="box-header">please_help_make_these_divs_stop_overlapping</div>
    <div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>

<table class="box" width="100%" cellpadding="0" cellspacing="0">
    <tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
    <tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>

Answer 1

Если вы действительно не хотите использовать таблицу, вы можете сделать это:

div.box div {
  overflow: hidden;
  zoom: 1; /* trigger haslayout for ie */
}

В следующий раз, когда возникнет такая проблема, перейдите на giveupandusetables.com .

Answer 2

Я не знаю простого способа сделать это дружественным для всех.

По крайней мере, в Firefox вы можете создать симулированную таблицу, установив div с помощью

display:table;
display:table-row;
display:table-cell;

Так что эти div работают как элементы таблицы. Тогда коробка будет содержать его содержимое. Wether это хорошее решение или не является спорным.

У меня были похожие проблемы с макетами страниц. Обычно я решил их, установив min-width и overflow: auto;

Answer 3

У меня была эта проблема также при использовании Firefox 6.0.1, Opera 10.62, Safari 5.1, но не в IE 9, а переполнение: автоматически исправляло его во всех браузерах. Больше ничего не делал. Я также попытался переполнить: содержать, что также решило проблему, но, похоже, что содержимое не является допустимым значением для переполнения, поэтому я предполагаю, что, поскольку значение было недопустимым, был заменен auto.

Answer 4

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

<style type="text/css">
    div.box, table.box
    {
        margin: 10px 1000px 10px 10px;
        border:  solid  1px  #BBBBBB ;
       padding: 0px;
    }

    div.box-header, td.box-header
    {

        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    border-bottom:  solid  1px  #BBBBBB ;

    }   

    .box-body, td.box-body
    {
        padding: 6px;
    }
</style>

Я изменил отступы поля на полях, переместил границу на ваш блок и добавил подчеркивание к заголовку

Answer 5

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

Следующее должно делать то, что вы хотите:

<style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>

<div class='box'>
    <h3>please help make these divs stop overlapping</h3>
    <p>please help make these divs stop overlapping</p>
</div>

Размышление о разметке и стиле отдельно - путь к CSS Zen Mastery: o)

Answer 6

Это работает (на самом деле лучше вместе, чем таблицы в ie7)

div.box{
  float:left;
  width:auto;
  margin: 10px 1000px 10px 10px;
}

div.box-header{
  float:left;
  width:100%;
  border:  solid  1px  #BBBBBB ;
  font-size: larger;
  padding: 4px; 
  background-color: #DDDDDD;
}

div.box-body{
  clear:left;
  float:left;
  width:100%; 
  padding: 4px; 
  border:  solid  1px  #BBBBBB ; 
  border-top: none;
}   

ПРИМЕЧАНИЕ: оба поля должны иметь одинаковые левый и правый отступы или один выдвигается немного.

Answer 7

Один из способов - заставить ваши ящики плавать. Добавить поплавок: слева; к коробке, заголовку коробки и телу коробки. Добавить ясно: оба; к телу коробки, чтобы заставить его ниже заголовка коробки. Вам, вероятно, потребуется добавить свойство clear к любому следующему содержанию.

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

Для других идей, проверьте этот вопрос .