php - HTML 段落栏样式

Question

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

我已经有了图片和标题，但是在标题下面我有一个段落，我不知道如何让它像图片中显示的那样(有主题和其他)，就像有栏和他们'在列表项中的固定位置(因此它们在垂直方向上均匀排列)。

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

我的 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;
}