Как правильно выровнять последний li? - PullRequest
Новая
       15

Как правильно выровнять последний li?

0 голосов
/ 21 октября 2018

Я пытаюсь выровнять <div class="right-align"> (последний <li>) по правому краю, используя CSS.Я пытался сделать следующее, но это не сработало.

Мне нужно сделать так, чтобы высота <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>

текущий выпуск:

current issue

желаемый выход:

desired output

Ответы [ 3 ]

0 голосов
/ 21 октября 2018

Вы можете достичь чего-то подобного с помощью 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>
0 голосов
/ 21 октября 2018

Я бы использовал свойство 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>
0 голосов
/ 21 октября 2018

Установить фиксированную ширину для .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>
...