дд элемент расширения передается родительский элемент шириной

Вот мой HTML, который выводит данные из базы данных:дд элемент расширения передается родительский элемент шириной

<div class="desc"> 
    <dl> 
     <dt><?php echo $listing['name'] ?> <span class="distance">(3.4 miles)</span></dt> 
     <dd><?php echo $listing['address'] ?></dd> 
     <dd><?php echo $listing['city'].', '.$listing['state'].' '.$listing['zip'] ?></dd> 
     <dd><?php echo $listing['phone'] ?></dd> 
     <dd><?php echo $listing['email'] ?></dd> 
    </dl> 
    <p><a href="#">See on map</a> | <a href="<?php echo $listing['web_link'] ?>" target="_blank">Go to Website</a></p> 
</div>

Тогда мой CSS:

dt { font-weight: bold; text-transform: uppercase; } 
dd { margin-left: 0; } 
dl { margin: 0; } 
div.desc { 
    float: left; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 45%; 
    padding: 0 12px; 
}

И jsFiddle http://jsfiddle.net/Xk58n/2/

Однако , dd продолжает пропускать ширину контейнера .desc, когда я просматриваю его в Chrome.

источник

2013-12-02 Peanut

Предоставление скрипку с вашим вопросом является хорошей идеей, но это очень важно, что это на самом деле продемонстрировать вашу проблему. Если я быстро заполню некоторые фиктивные значения, где у вас есть значения PHP, ваш пример, похоже, работает нормально. http://jsfiddle.net/nate/KqTxW/3/ – Nate

Я просмотрел ваш код и не вижу разницы с google для firefox. –

@Nate Я просто сделал то же самое, см. Ссылку OP second jsFiddle. –

Добавьте word-break:break-word; правило в ваш #listings dl CSS:

#listings dl { 
    margin: 0; 
    word-break:break-word; 
}

jsFiddle example

источник

2013-12-02 18:33:37 j08691

СПАСИБО =) Исправлено! – Peanut

дд элемент расширения передается родительский элемент шириной

ответ

Смежные вопросы