Разрыв, вставленный между рядами

Question

У меня есть простая строка, в которой перечислены определенные возможности финансирования.Я запутался в поведении, которое происходит с кодом 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>

Однако, если я закрою каждый "panel-inside" класс, тогдарезультат другой.

<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>

Мне нужно, чтобы форматирование было похоже на второе изображение, но я не понимаю, почему я должен закрывать каждую "панель внутри"учебный класс.Разве этот 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;
}

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

Css:

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

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

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

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