Пробел, вставленный между строками Div

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

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

источник

2012-03-07 user1152440

какой браузер вы используете? Я пробовал это в IE и хром, и он выглядит так же, как на картинке (без добавления разделителя div и без закрытия и повторного открытия div) –

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

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

Это происходит потому, что вы не clearfix класс .row правильно, но внешний дополнительный ДИВ служит в качестве частичной Resetter.

источник

2012-03-07 15:18:58

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

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

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

источник

2012-03-07 15:18:22 Christoph

Я бы добавил +1 за рекомендацию, но это должен быть комментарий, так как это не ответ действительно. –

Это зависит - когда он переключится на таблицы, это решит его проблему, но я добавил еще одно решение для его оригинальной проблемы;) – Christoph

Спасибо Кристоф и Михалис, это работает. По совету, я думаю, что я расскажу о чем-нибудь, что было бы намного проще. Я все еще участвую в обучении, но еще раз спасибо, что это действительно помогает, я ценю это. – user1152440

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

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

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

Css:

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

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

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

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

источник

2012-03-07 15:36:55 w3uiguru

Пробел, вставленный между строками Div

ответ

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