Question

我试图得到一个不同高度的<li>的垂直列表，其中每个都有两个标签，彼此相邻，并且高度最高标记;左边的有一个固定的宽度（128px），右边的占据页面的其余部分，但不包裹在第一个。

以下是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可以帮到你。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

有几种方法可以给这只猫上皮。如果我正确理解你的内容，我认为使用表格行和表格单元格显示属性可能是最简单的方法。

这是一个jsfiddle： https://jsfiddle.net/s2jzh31z/2/

包括以下内容， HTML：

<ul>
  <li>
    <p class="category">Something (known width)</p>
    <p class="description">Something long and multiple lines.
        Shouldn't wrap underneath category. 
      Lorem ipsum dolor sit amet consecteur adipiscing elit no numi. 
      Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
      Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
      Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
      Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
      Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.</p>
  </li>

  <li>
    <p class="category">Another thing(known width)</p>
    <p class="description">Something to the right,
      determines the height of this "&lt;li&gt;"</p>
  </li>

</ul>

CSS：

ul {
    margin: 0;
}

li {
    clear: both;
    display: table-row;
    width: 100%;
}

p {
    display: table-cell;
    padding: .5em;
    vertical-align: top;
}

p.category {
    width: 128px;
}

我冒昧地垂直对齐并稍微调整填充以使其看起来更整洁。垂直对齐是我在使用table-row / table-cell方法时所寻求的好处之一。

Answer 3

语义正确且新的年龄＆＃39;你可以使用CSS3的Flexbox布局来做到这一点，但如果这是表数据（看起来是，使用类别和描述），那么你可以将它重组为一个表（如果你需要支持旧浏览器，这也有帮助）。登记/>
HTML看起来像这样：

<table>
      <tr>
        <td class="category">Something (known width)</td>
        <td>Something long and multiple lines.sdsdsdsdsdsdsdsdsdsdsdsdddddddddddddddddddddddddddddddsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsssssssssssssssssssssssssssssdddddddddddddddddddddddsdssdsssssssssssssssssssssssssss
            Shouldn't wrap underneath .category</td>
      </tr>

      <tr>
        <td class="category">Another (known width)</td>
        <td>Another long and multiple lines.
            Shouldn't wrap underneath .category</td>  </tr>

    </table>

和你的CSS：

.category {
    width: 128px;
}

CSS：两个并排的p标签，相同的高度，左边一个固定宽度＆amp;已知高度

3 个答案: