Блог

Главная - Вопросы по программированию - bottom -border не переходит на дно?

bottom -border не переходит на дно?

#html #css

#HTML #css

Вопрос:

По какой-то причине нижняя граница не будет отображаться внизу? Линия границы отображается в верхней части содержимого, в чем причина этого?

Хорош ли мой css?

HTML

 <div class="rowOrder">
    <div class="orderid">
        <span>07/04/2011</span>
        OrderID 1234
    </div>
    <div class="company">
        My Company
    </div>
</div>

CSS

 .rowOrder {
    padding:3px;
    border-bottom: solid 1px #B4CE51;
    display:block;
}
.rowOrder .orderid {  float:left; margin-right:30px;  }
.rowOrder .orderid span {
    display:block;
}

.rowOrder .company {
    float:left;
    font-weight:bold;
}

Ответ №1:

  1. Как только вы перемещаете элемент, он выходит из общего потока, означает, что содержащий div не будет действовать как содержащий div, например, для границ содержащего div. Решение, добавьте еще один div в конце в rowOrder со стилем=»очистить: оба» (или попробуйте присвоить это последнему внутреннему div.
  2. Вам не нужно указывать свой div display: block
  3. Не указывайте свой диапазон display: block просто используйте div
  4. Похоже, вы пытаетесь представить табличные данные. Семантика в этом случае заключается в использовании <table> тега.

Комментарии:

1. 1 Хороший комментарий о «похоже, вы пытаетесь представить табличные данные. Семантика в этом случае заключается в использовании <table> тега». Tableless — это не прекращение использования таблиц на всю оставшуюся жизнь.

Ответ №2:

Одна странность, которую вы можете использовать в своих интересах, заключается в том, что DIVS с overflow: hidden увеличиваются, чтобы содержать их плавающие элементы. Это, конечно, взлом, но он работает в разных браузерах. Переполнение: hidden не имеет никакого другого эффекта, поскольку содержащему DIV не задан какой-либо явный размер.

Комментарии:

1. спасибо, что исправили проблему, добавив overflow: hidden в .rowOrder css. Нижняя граница имеет полную ширину, как и ожидалось, но почему float: left; этого не делает?

Ответ №3:

Вы могли бы попробовать навести Firebug на элементы, чтобы выделить, где расположены divs (или наложить на них цвета фона).

Возможно, это плавающая проблема (попробуйте floating .rowOrder слева?)

Ответ №4:

Плавающие элементы нарушают поток HTML, поэтому вы должны учитывать это. И это то, что здесь происходит.

Вы можете легко убедиться в этом, используя Firebug (расширение FF ), например, и проверив свой rowOrder div. Вы должны видеть, что он не имеет полной высоты, какой он должен быть. Ваш OrderID и company div имеют определенную высоту, но содержащий div (например, rowOrder ) имеет гораздо меньшую высоту. Это типичный индикатор того, что значения с плавающей точкой не очищаются. Div rowOrder должен иметь по крайней мере высоту всего, что он содержит.

Ответ Итая устраняет проблему.

Ответ №5:

Плавающие элементы не сопоставляются при вычислении родительской высоты. И свойство float не следует использовать для простого выравнивания элементов. Для этого у нас есть свойство align или свойство text-align родительского элемента.

попробуйте это:

 .rowOrder {
    padding:3px;
    border-bottom: solid 1px #B4CE51;
    display:block;
    text-align:left;
}
.rowOrder  {
    margin-right:30px;
}
.orderid, .company{
    display:inline-block;
    vertical-align:top;
}
.rowOrder .company {
    font-weight:bold;
}