У меня есть простая строка, в которой перечислены определенные возможности финансирования. Меня смущает поведение, которое происходит с кодом CSS / HTML, когда между записями в списке будет разрыв, если я не использую отдельные классы. Например, на картинке ниже показано, что происходит, когда я использую:

<div class="panel-inside">
    <div class="row">
        <div class="label">Funding Opportunity 1</div>
        <div class="label-date">Sep. 16, 2012</div>
    </div>
    <div class="listSeparator"></div> 
    <div class="row">
        <div class="label">Funding Opportunity 2</div>
        <div class="label-date">Dec. 2, 2012</div>
    </div>
</div>

enter image description here

Однако если я закрою каждый класс "внутри панели" , результат будет другим.

<div class="panel-inside">
    <div class="row">
        <div class="label">Funding Opportunity 1</div>
        <div class="label-date">Sep. 16, 2012</div>
    </div>
</div>
<div class="listSeparator"></div> 
<div class="panel-inside">
    <div class="row">
        <div class="label">Funding Opportunity 2</div>
        <div class="label-date">Dec. 2, 2012</div>
    </div>
</div>

enter image description here

Мне нужно, чтобы форматирование было как на втором рисунке, но я не понимаю, почему я должен закрывать каждый класс «внутри панели». Разве этот div не должен быть «контейнером» для строк? Я думаю, что причина этого пробела в том, что вторая строка начинается там, где текст из предыдущей строки, но я не знаю, как это исправить. Я включил приведенный ниже код CSS с выделением цвета границы, чтобы помочь различать элементы. Спасибо за любую помощь!

.panel-inside { 
    border: 3px dotted purple;
    border-left: 2px solid #D6D3D6;
    border-right: 2px solid #D6D3D6;
    background: white;
    padding-left: 0px;
    padding-right: 0px;
    overflow:auto;
    border-radius:7px;
} 

.row                                   
{
    height: 40px;      
    width:100%;        
    vertical-align:middle;
}

.label                               
{
    border: 1px dotted blue;
    font-family: BBAlpha Sans;
    font-size: 15pt;
    display:inline;    
    float:left;
    line-height:40px; 
    margin-left:5px;   
}

.label-date
{
    border: 1px dotted black;
    font-family: BBAlpha Sans;
    font-size: 12pt;
    color:#686868;
    display:inline;    
    float:right;
    line-height:40px; 
    margin-right:7px;  
}

.listSeparator                
{
    border-bottom: solid 1px Silver;
}
0
user1152440 7 Мар 2012 в 19:12

3 ответа

Лучший ответ

Попробуйте изменить класс listSeparator следующим образом:

.listSeparator                
{
    border-bottom: solid 1px Silver;
    clear:both;
}

Это происходит потому, что вы не очищаете класс .row должным образом, но внешний дополнительный div служит частичным средством сброса.

2
Mihalis Bagos 7 Мар 2012 в 15:18

Серьезно - когда у вас есть табличные данные и табличная структура - используйте таблицы ... гораздо более надежные и кроссбраузерные.

При желании - добавьте overflow:auto; в .row ИЛИ clear:both; в .listSeparator, это должно решить проблему.

Edit: вы можете опустить высоту при использовании overflow, а также опустить .listSeparator (добавив границу к .row).

2
Christoph 7 Мар 2012 в 15:31

Вот решение без закрытия класса class = "panel-inside" для каждой строки.

HTML похож на первое условие, но с одним отличием -

<div class="listSeparator">&nbsp;</div> 

Css :

.listSeparator { border-bottom: solid 1px Silver; clear:both;}

Clear позволяет плавающим элементам, которые были раньше в документе, перемещаться по его сторонам. Итак, использование clear: both означает, что ваш div будет смещен в конце других плавающих элементов рядом с вашим div.

http://www.free-scripts.net/html_tutorial/css/properties/classify/clear.htm

http://www.positioniseverything.net/easyclearing.html

0
w3uiguru 7 Мар 2012 в 15:36