HTML段列样式

Question

我正在制作一个列表，每个列表项都具有相同的结构：

我已经获得了图片＆amp;标题到位但在标题下面我有一个段落，我不知道如何使它像图片中显示的那样（主题和其他），就像列，它们位于列表中的固定位置item（所以他们垂直排列）。

我目前的段落只是主题：测试。我不知道如何放置“其他”文本。

我的CSS代码与此相关：

div {
  margin: 20px;
}

ul {
  list-style-type: none;
  width: 1000px;
}

h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}

li img {
  float: left;
  margin: 0 15px 0 0;
}

li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}

li {
  padding: 10px;
  overflow: auto;
}

li:hover {
  background: #eee;
  cursor: pointer;
}

和我的HTML代码：

<ul>
    <li>
      <img src="http://lorempixum.com/100/100/nature/2">
      <h3>Header</h3>
      <p>Subject: Test</p>
    </li>
</ul>

谢谢！

Answer 1

使用此代码：

DEMO

<强> HTML

<ul>
    <li>
        <img src="http://lorempixum.com/100/100/nature/2" />
      <h3>Header</h3>
      <ul>
          <li><strong>Subject:</strong> test</li>
          <li><strong>Other:</strong> test</li>
          <li><strong>Other:</strong> test</li>
          <li><strong>Other:</strong> test</li>
          <li><strong>Other:</strong> test</li>
          <li><strong>Other:</strong> test</li>
      </ul>
     </li>
</ul>

<强> CSS

body, html, ul{
    margin:0;
    padding:0;
}
div {
  margin: 20px;
}

ul {
  list-style-type: none;
  width: 1000px;
}

ul ul{
    float:right;
    width:865px;
}

li li{
    width:31%;
    float:left;
    padding: 10px 1%;
}

h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
    margin:0;
}

li img {
  float: left;
  margin: 0 15px 0 0;
}

li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}

li {
  padding: 10px;
  overflow: auto;
}

li:hover {
  background: #eee;
  cursor: pointer;
}

Answer 2

这就像你想要的那样：

<强> CSS：

div {
  margin: 20px;
}

ul {
  list-style-type: none;
  width: 1000px;
}

h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;

    margin-top:-5px;
    position:relative;
}

li img {
  float: left;
  margin: 0 15px 0 0;
}

li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
  margin-top:-20px;
  position:relative;

}

li {
  padding: 10px;
  overflow: auto;
}

li:hover {
  background: #eee;
  cursor: pointer;
}

您可以看到jsfiddle