如何对齐最后一里？

Question

我正在尝试使用CSS对齐<div class="right-align"> (最后一个<li>)。我确实试着做了下面的工作，但没有起作用。

我需要能够使<ul class="third-level">的高度自动调整为<div class="right-align">的高度，这取决于内容的长度。

密码素

我如何正确地对齐最后一个<li>

因为<div class="right-align">的高度，我试过但没有成功的

.third-level {
  position: relative;
  
}

.third-level li:last-child {
  position: absolute;
  right: 0;
}

<ul class="third-level">
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
          <li >
            <div class="right-align">
            <img src="https://via.placeholder.com/350x150">
            <h5>Image placeholder</h5>
            <p>Collaboratively matrix parallel growth strategies rather than emerging "outside the box" thinking. </p>
            
            <a href="#some-path">Some path</a>
            </div>
          </li>
        </ul>

​

本期：

​

​

期望产出：

​

​

Answer 1

为.third-level li:last-child设置固定宽度。大约200 or或50%和top: 0;使其与顶部对齐。

​

.third-level {
  position: relative;
  
}

.third-level li:last-child {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
}

<ul class="third-level">
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
          <li >
            <div class="right-align">
            <img src="https://via.placeholder.com/350x150">
            <h5>Image placeholder</h5>
            <p>Collaboratively matrix parallel growth strategies rather than emerging "outside the box" thinking. </p>
            
            <a href="#some-path">Some path</a>
            </div>
          </li>
        </ul>

​

Answer 2

您可以通过CSS Grid实现这样的目标：

​

.third-level {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

<ul class="third-level">
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
          <li >
            <div class="right-align">
            <img src="https://via.placeholder.com/350x150">
            <h5>Image placeholder</h5>
            <p>Collaboratively matrix parallel growth strategies rather than emerging "outside the box" thinking. </p>
            
            <a href="#some-path">Some path</a>
            </div>
          </li>
        </ul>

​

Answer 3

我会使用CSS flex属性来实现这一点。正如@cale_b在您的评论中所提到的，它强烈建议您为您真正想要的设计更改无意义的标记。

​

.third-level {
  display:flex;
  flex-flow:row wrap;
  width:100%;
  background: #b9deb9;
  padding:0; margin:0;
}

.third-level > div {
  flex-grow:1;
  
  border:1px solid red;
  margin:2px;
  width:45%;
}

.right-align{
}

<ul class="third-level">
          <div><a href="#">Resets</a></div>
          <div><a href="#">Frameworks</a></div>
          <div><a href="#">Grids</a></div>
          <div class="right-align">
            <img src="https://via.placeholder.com/350x150">
            <h5>Image placeholder</h5>
            <p>Collaboratively matrix parallel growth strategies rather than emerging "outside the box" thinking. </p>
            
            <a href="#some-path">Some path</a>

          </div>
        </ul>

​