如何实现div的底部“清晰”，而不仅仅是左右

Question

我正在显示投票链接列表，类似于Hacker News。我希望每个链接都有以下布局：

灰色框突出显示列出的每个链接的四个div。

我需要做的关键是让“其他文字”div与链接标题文字保持左对齐。

我当然可以定义等级和箭头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;
}

---

编辑：Demo on jsfiddle

Answer 2

解决方案1 ​​

似乎每件商品的所有四个盒子都放在一个更大的盒子里（李可能），所以我会用：

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

请注意，您需要根据div的大小等因素更改CSS。

Answer 4

Answer 5

为什么不为链接标题文本和其他文本提供包装元素？然后浮动包装器。

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

你可以将这两个东西包含在div中，然后将左边的div包含在投票内容中，用一个类标记div，“vote”，并使用以下CSS：

.vote {
  margin: 0 0 100%;
}

我没有测试过它，但它应该像魅力一样。

警告：不适用于响应式设计:(

Answer 8

最好的解决方案可能是将标题文字与标题文本相关联。和其他文字＆＃39;在一个＆＃39;内并使用＆溢出：隐藏;＆＃39;在它上面。