Question

我正在尝试实现这样的简单布局：

Title at place----------Date
Location------------Complete

这就是我现在所拥有的：http://jsfiddle.net/80m96ko3/2/

我希望在下面的行中找到位置并完成。是实现这一目标的唯一方法是使用BR，除非我必须使用一个显示块，它将使标题链接在整个宽度上可点击（我不想要）。我也不想使用<table>。

<div class="job">
<span class="title">Title</span> at <span class="place">Place</span><span class="posted right">15 Jun</span>
<span class="location">Location</span><span class="type right">Complete</span>
</div>

Answer 1

您可以使用伪类:before（或：在之后）来破坏一条线。

.location:before{
    content: "";
    display: block;
}

Answer 2

使用无序列表。它会完成你的工作。

<ul class="job">
  <li>
    <span class="title">Title</span> at <span class="place">Place</span><span class="posted right">15 Jun</span>
  </li>
  <li>
    <span class="location">Location</span><span class="type right">Complete</span>
  </li>
</ul>

Answer 3

为什么不使用无序列表？

<div class="job">
    <ul>
        <li>
            <span class="title">Title</span> at <span class="place">Place</span><span class="posted right">15 Jun</span>
        </li>
        <li>
            <span class="location">Location</span><span class="type right">Complete</span>
        </li>
    </ul>
</div>

你的风格：

.right {float: right;}
ul {list-style: none ;}

不使用BR在新线路上的内容

3 个答案: