Question

我有这个结构

<div>item 0</div>
<ul>
    <li>item 1 <br> some <br> text</li>
    <li>item 2 <br> text </li>
    <li>item 3</li>
</ul>

我需要将<div>和<li> - s放在彼此旁边（宽度：50％），这很容易。但div必须与<li>的第一个高度相同。 <li>身高未知

我正在寻找表单css唯一解决方案。 JS不被允许。欢迎Flexbox，一些额外的HTML标记，但ul需要保留ul。

Answer 1

您可以使用CSS-Grid和sub-grid system使用display:contents执行此操作。所有浏览器尚不支持此功能，但很快就会推出：

下面在chrome和firefox上测试的代码

.container {
  display: grid;
  grid-template-columns:1fr 1fr;
}

.container > div{
 box-sizing:border-box;
 border:1px solid;
}

ul {
 display:contents;
 margin:0;
 padding:0;
}
ul li {
  display:contents;
}
/*Create a hidden element to fill the first column and keep the content of li in the second one*/
ul li:after {
  content:"";
}

<div class="container">
  <div>item 0</div>
  <ul>
    <li>item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae isus in velit tristique bibendum. Ut porta diam ac eros finibus, ac rhoncus nulla congue. <br> some <br> text</li>
    <li>item 2 <br> text </li>
    <li>item 3</li>
    <li>item 4 <br> text </li>
    <li>item 5</li>
    <li>item 6 <br> text </li>
    <li>item 8</li>
  </ul>
</div>

在<ul>之前定位容器，使其与列表的第一个<li>元素具有相同的高度

1 个答案: