html - CSS:两个并排的 p 标签，相同的高度，左边一个固定宽度和已知高度

Question

我正在尝试获取 <li> 的垂直列表的高度不同，每个都有两个 <p>标签彼此相邻并且具有最高的高度<p>标签; <p>左边有固定宽度 ( 128px ) 和 <p>右边应该占据页面的其余部分，但不在第一个 <p> 下方包裹.

这是示例 HTML:

<ul>

  <li> <!-- height = the tallest of the two p tags -->
    <p class="category">Something (128px wide)</p>
    <p class="description">Something long...
        Shouldn't wrap underneath .category
    </p>
  </li>

  <li> <!-- beneath the li above, probably different height -->
    <p class="category">Another thing</p>
    <p class="description">Another long description...</p>
  </li>

</ul>

CSS 应该是什么样的？

Answer 1

Flexbox 可以为您解决问题。

ul {
  width: 300px;
}
li {
  width: 100%;
  clear: both;
  display: flex;
  flex-direction: row;
}
li p {
  display: inline;
  float: left;
  background-color: #eeeeee;
}
p.category {
  width: 128px;
}

<ul>
  <li>
    <!-- height = the tallest of the two p tags --->
    <p class="category">Something (known width)</p>
    <p class="description">Something long... Shouldn't wrap underneath .category
    </p>
  </li>

  <li>
    <!-- beneath the li above, probably different height -->
    <p class="category">Another thing</p>
    <p class="description">Another long description...</p>
  </li>

</ul>

更多信息: https://css-tricks.com/snippets/css/a-guide-to-flexbox/