Содержание в плавающих элементах div приводит к падению элемента div ниже - PullRequest
Новая
       8

Содержание в плавающих элементах div приводит к падению элемента div ниже

0 голосов
/ 10 января 2010

Я отображаю сообщения WordPress горизонтально, используя плавающие div. У меня все работает нормально, но когда элементы div перемещаются в новую строку, если текст абзаца внутри каждого перемещенного элемента div слишком длинный, элемент div сразу под ним падает. Кроме того, каждый перемещенный div зависит от длины div над ним.

Как мне заставить их течь естественным образом, не подвергаясь влиянию высот тех, кто над ними?

Вот мой HTML для одного плавающего div: 

  <div class="entry_column>
     <div class="entry">
       <h2>Entry title</h2>
       <p>Entry excerpt...if this text gets too long, the div immediately 
below it gets pushed WAY down</p>
      </div>
    </div>
    <br class="clearFloat" />

А вот соответствующие классы CSS: 

    .entry_column {
        float: left; width: 50%;
    }

        .entry_column .entry {
            margin-right: 25px;
    }

.clearFloat {
    clear: both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

Я перепробовал все, что мог придумать для очистки, но если я попытаюсь добавить очистку непосредственно к плавающим элементам div, я все равно не могу заставить его перестать падать.

Надеюсь, изображение объясняет эту проблему немного лучше. Поле «Больше музыки» опускается до конца из-за длины разделительного элемента «Музыкальная стойка» над ним.

Screenshot of problematic layout

Ответы [ 3 ]

0 голосов
/ 10 января 2010

Похоже, есть синтаксическая ошибка. Вы забыли закрыть атрибут класса:

<div class="entry_column>

0 голосов
/ 11 января 2010

Если вы не можете добавлять элементы, вы можете попробовать использовать селектор CSS 3-го ребенка, чтобы сказать «очистить каждый 5-й элемент entry_column. (для строк шириной 5 записей) 

.entry_column:nth-child(5n+0)

http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#nth-child-pseudo

Возможно, он не так удобен для браузеров, как вам нужно.

0 голосов
/ 10 января 2010

Итак, суть вашей проблемы в том, что «Это просто собирается ... Тестовый пост» должен стоять напротив крайнего левого, под «Стенд музыкального поста»?

Попробуйте включить
только в конце строки entry_columns, поэтому на скриншоте вы должны включить его только между «Еще одним забавным постом» и «Это просто переход». .. Тестовый пост "

<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.entry_column {
    float: left; width: 100px;
}

    .entry_column .entry {
        margin-right: 25px;
}

.clearFloat {
    clear: both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
-->
</style>
</head>
<body>
  <div class="entry_column">
     <div class="entry">
       <h2>Entry title</h2>
       <p>
            Entry excerpt...if this text gets too long, the div immediately below it gets pushed WAY down.
            Repeated to make it long:
            Entry excerpt...if this text gets too long, the div immediately below it gets pushed WAY down
       </p>
      </div>
    </div>
  <div class="entry_column">
     <div class="entry">
       <h2>Entry title</h2>
       <p>Entry excerpt...</p>
      </div>
    </div>
    <br class="clearFloat" />
  <div class="entry_column">
     <div class="entry">
       <h2>Entry title</h2>
       <p>New row of Entries</p>
      </div>
    </div>
  <div class="entry_column">
     <div class="entry">
       <h2>Entry title</h2>
       <p>Entry excerpt...</p>
      </div>
    </div>
    <br class="clearFloat" />
</body>
</html>

(... в этот момент вы должны вместо этого удалить
и присвоить элементам entry_columns, которые в начале строки, дополнительный класс, и нацелиться на этот класс с помощью правила CSS, присвоив ему 'clear: both ; 'свойство.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...