Как добиться «очистки» для нижней части div, а не только влево и вправо

Question

Я отображаю список ссылок для голосования, аналогично Hacker News . Я хочу следующий макет для каждой ссылки:

В серых полях выделены четыре деления для каждой ссылки в списке.

Ключевым моментом, который мне нужно сделать, является выравнивание элемента div "other text" по левому краю с текстом заголовка ссылки.

Я мог бы, конечно, определить ширину div для ранга и стрелки (два маленьких прямоугольника), а затем соответствующим образом сделать отступ для другого текста div. Но у этой реализации есть некоторые недостатки относительно моих конкретных потребностей, в которые я не буду вдаваться, и что более важно, я просто чувствую, что должен быть более элегантный способ добиться этого. Что-то вроде прозрачного дна для div и ранга со стрелкой, или, может быть, свойство div заголовка ссылки, которое указывает следующему div появляться прямо под ним.

Есть идеи?

Answer 1

Почему бы просто не положить два правильных контейнера в один?

<div class="rank">9</div>
<div class="arrow">arrow</div>
<div class="content">
  <div class="row1">Link headline text</div>
  <div class="row2">other text</div>
</div>
<br class="clear" />

стиль:

.rank, .arrow, .content {
  float: left;
}
.clear {
  clear: left;
}

---

РЕДАКТИРОВАТЬ : Демонстрация на jsfiddle

Answer 2

Решение 1

Кажется, что все четыре коробки для каждого элемента находятся в одной большой коробке (может быть, li), поэтому я бы использовал:

<li>
  <span class="num"></span>
  <span class="upvote"></span>
  <span class="main">main text</span>
  <span class="add">more text</span>
</li>

и

.add { clear: both; float: right; }

Решение 2

Другое решение будет padding для родителя каждой группы из четырех, а затем отрицательным margin-left вместе с float: left наколичество и ссылки upvote.

Все, что лучше, может быть адаптировано к вашим потребностям, но нам нужно увидеть HTML:)

Answer 3

Я бы пошел на комбинацию ответов, данных @Adam и @Czechnology, и использовал бы список для отображения содержимого, и поместил поля Link headline text и other text в один родительский div. Вот так:

HTML:

<ol class="headlines">

  <li class="news-item">
    <div class="rank">9</div>
    <div class="arrow"><img src="arrow.png" /></div>
    <div class="content">
      <h2><a href="foo.html">Link headline text</a></h2>
      <div class="additional-content">other text</div>
    </div>
  </li>

  <li class="news-item">
    <div class="rank">10</div>
    <div class="arrow"><img src="arrow.png" /></div>
    <div class="content">
      <h2><a href="foo.html">Link headline text</a></h2>
      <div class="additional-content">other text</div>
    </div>
  </li>
</ol>

Тип:

ol.headlines {
  display:block;
  list-style-type:none;
  list-style-position:outside;
  margin:0;
  padding:0;
}

div {
 border:1px solid #00F;
}


 ol.headlines .rank, ol.headlines .arrow, ol.headlines .content {
  float:left;
}

.news-item {
  clear:left;
}

ol.headlines h2,
ol.headlines .additional-content {
  display:block;
}

Вы можете найти образец этого здесь: http://jsfiddle.net/DEWtA/

Обратите внимание, что вам нужно будет изменить CSS в соответствии с вашими потребностями в зависимости от размера div-ов и тому подобного.

Answer 4

Лучшее решение, вероятно, заключалось бы в том, чтобы заключить «текст заголовка ссылки» и «другой текст» в «div» и использовать «overflow: hidden;» на нем.

Answer 5

Вы можете поместить эти две вещи в div, а затем для левого div с голосующим материалом, пометить div классом, «голосовать», и иметь следующий CSS:

.vote {
  margin: 0 0 100%;
}

Я не проверял его, но он должен работать как шарм.

Предостережение: плохо работает с адаптивным дизайном: (

Answer 6

http://jsfiddle.net/userdude/H3qPt/

HTML

<div class="linkblock">
    <span class="score">100</span>
    <span class="arrow">^</span>
    <div class="linkdata">
        <div class="linkurl">Link headline</div>
        <div class="linktext">Other text</div>
    </div>
    <br/>
</div>

CSS

Часть этого только для демонстрации.

.linkblock .score,
.linkblock .arrow,
.linkblock .linkdata {
  float: left;
}
.linkblock br {
  clear: both;
}

div, span {
  border: 2px solid #ddd;
  margin: 4px;
  padding: 3px;
}
div.linkdata {
  border: none;
  padding: 0;
  margin: 0;
}

Answer 7

Почему бы не предоставить элемент-обертку для текста заголовка ссылки и другого текста? Затем вместо этого поместите в оболочку.

Answer 8