如何正确对齐最后一个？

Question

我正在尝试使用CSS将<div class="right-align">（最后一个<li>）右对齐。我确实尝试执行以下操作，但是没有用。

我需要能够使<ul class="third-level">的高度根据内部内容的长度自动调整为<div class="right-align">的高度。

codepin

如何正确对齐最后一个<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设置固定宽度。类似于200px或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>