0

Вот смотрите, http://jsfiddle.net/mgpv8qvt/1/ почему подчеркивание идет над строкой а не под?

Хотелось бы сделать линию под дивом не задавая высоту - просто класс dest иногда будет идти в несколько строк, и если задать высоту, то всё будет сбиваться

<div class="obs">
    <span class="dest">Приемная (справочная)</span>
    <span class="phone">8-812-111-11-11</span>
</div>
    <div class="line"></div>



    .obs{
margin: 20px 0 0 0;
}
.dest{
    float: left;
    font-size: 16px;
    font-family: "PF BeauSans Pro",sans-serif;
    color: #666666;
}

.phone{
    float: right;
    font-size: 18px;
    font-family: "PF BeauSans Pro",sans-serif;
    color: #000;
    font-weight: bold;
    text-decoration: underline;
}

.line{
    border-bottom: 1px dashed #000;
}

UPDATE http://jsfiddle.net/mgpv8qvt/2/ можно сделать так, но почему тогда текст не выравнивается?

3 ответа 3

2

Потому что у вас родительский блок "развалился" из-за float'ов.

overflow: hidden на .obs должно помочь.

Пример в fiddle.

2
  • спасибо, overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.Как тогда это свойство тут помогает, если у меня ничего не выходит за область? Commented 3 июл. 2015 в 9:10
  • Это основы потока блоков. Когда ты применяешь флоат, то поток ломается и родитель схлопывается. Его нужно очистить. Для этого есть много способов. Самый распространенный - оверфлоу. Если он не подходит, можно использовать :after{content:"";display:block;clear:both}. Инлайновые блоки, блоки висящие на абсолюте или флотнутые блоки не схлопываются когда флоатаешь их детей
    – Anon
    Commented 3 июл. 2015 в 9:13
1

Чтобы родитель имел высоту, и он, и его дети должны быть block или inline-block. Альтернативо, можно установить overflow, тогда block добавится сам. Ну и разумеется, вместо добавления целого дива ради одной линии, можно установить цвет нижней границы на собственно родителе. Вот так:

.obs{
    margin: 20px 0 0 0;
    overflow: auto; /* ответ на вопрос */
    border-bottom: 1px solid red; /* просто совет */
}

Демо: http://jsfiddle.net/kxbj89ty/

1

Как вариант, добавь

.obs {
    overflow: hidden;
    border-bottom: 1px dashed #000;
}

А div.line вообще убери из разметки.

И погугли, что такое clearfix.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.