Странное дополнительное пространство между двумя элементами?

Я пытаюсь создать отзывчивый дизайн для веб-сайта, но столкнулся с проблемой.Странное дополнительное пространство между двумя элементами?

Посетите эту страницу: http://test.ufeed.se/

Изменить размер браузера под 820px и вы увидите адаптивный дизайн. Проблема здесь в том, что я получаю странное пространство между данными и заголовком? Я пытался найти, почему есть пространство, но без везения?

Это простая разметка части:

<div class="rightPostCell"> 
     <div class="titleCon"> 
      <div class="linkIcoCon"> 
       ... 
      </div> 
      <div class="floatLeft"> 
       ... 
      </div> 
     </div> 
     <div class="data dimText"> 
      <div class="commentsCon"> 
       ... 
      </div> 
      <div style="clear:both;"></div> 
      <div class="createdDateCon"> 
       ... 
      </div> 
      <div style="clear:both;"></div> 
      <div class="baseLinkCon"> 
       ... 
      </div> 
     </div> 
    <div style="clear:both;"></div> 
    </div>

Почему пространство между заголовком и данными? И как его удалить?

источник

2013-04-23 Banshee

Изменения необходимо внести в свой mobile.css файл

.postContainer .titleCon{ 
    overflow:hidden; /* ADD this property */ 
} 

.postContainer .data{ 
    overflow:hidden; /* ADD this property */ 
    clear:both; /* REMOVE this property */ 
}

источник

2013-04-23 17:20:47

Но мне нужно название, чтобы иметь возможность расти и показывать контент? – Banshee

'overflow: hidden' позволяет элементам с поплавками внутри них расширяться, чтобы содержать их плавающих детей .. так что вам нужно *, чтобы положить его так, чтобы контейнер имел вычисляемый размер. (* другими словами, если вы не укажете фиксированную высоту, он ничего не скроет *) –

@SnowJim, вот как вы делаете элемент расширяющимся, чтобы соответствовать его содержимому при использовании поплавков. вы также можете использовать 'overflow: auto'. –

Похоже, это float вопрос (я считаю, проблемы, как правило, возникают каждый раз, когда я использую float, вообще-то я предпочитаю display: inline-block, потому что он вводит меньше странных ошибок, как это) - если отключить clear: both на данных, он попадает в место правильно.

источник

2013-04-23 17:11:19 Adrian

+1 для предпочитающих 'дисплей: инлайн-block'! –

Спасибо, я попытался удалить оба div с ясными: как внутри div class = "data .. element, но это не исправить проблему? Exacly what clear: left удалить, чтобы устранить проблему? – Banshee

Не относится к этому вопрос, но 'display: inline-block' имеет свои проблемы в старых браузерах. – Hoshts

линия 37 вашего PostList.css добавить overflow:auto

в mobile.css линии 80 изменение поплавок: нет в clear:both

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

источник

2013-04-23 17:20:42

rightPostCell получил переполнение: auto в PostList.css и postContainer понятен: оба вместо float: none. Это создает переменный странный макет с большим количеством полос прокрутки. – Banshee

попробовать это будет решить вашу проблему добавить четкий класс после левой и правой ячейки и добавить через поток, спрятанный в .postContainer .rightPostCell класс

<div class="postContainer"> 
     <div class="leftPostCell">data</div> 
     <div class="rightPostCell">data</div> 
     <div style="clear:both;"></div> 
    </div> 

.postContainer .rightPostCell {margin-left: 123px;overflow: hidden;}

источник

2013-04-23 17:26:02

Существует множество решений. Вот один:

mobile.css линия 80

.postContainer { 
    width: 100%; 
    padding: 3px; 
    float: left; 
}

PostList.css линия 37

.postContainer .rightPostCell { 
    float: left; 
}

источник

2013-04-23 17:29:29 Hoshts

Странное дополнительное пространство между двумя элементами?

ответ

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