Question

这看起来很简单，但我做不到。

我的work-features框与底部对齐。我曾尝试使用vertical-align: middle，但这会让情况更糟。

我宁愿不设置固定的高度，使用float或jQuery来完成此任务。也无法更改<div class="work">块内的HTML。

我已经阅读了其他一些关于SO的问题，但没有一个解决方案适合我。

HTML

<article class="post">
    <div class="entry" lang="en">
        <div class="work">
            <ul class="work-features">
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>Cras facilisis urna in vulputate vehicula.</li>
            </ul>
            <div class="work-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum elit nec elementum tincidunt. Duis pharetra vehicula odio sit amet rhoncus. Cras id est tincidunt, dictum lacus id, venenatis orci. Nulla consequat nunc nec nisl blandit, non porta ipsum rhoncus. Praesent eleifend bibendum dignissim. Pellentesque a scelerisque dolor, nec auctor eros. Nam eu nunc nisl. Quisque sed varius lorem. Suspendisse a tellus vel lacus elementum mollis ac ut turpis. Morbi scelerisque viverra dignissim. Curabitur id semper nisi, in eleifend elit. Pellentesque dapibus auctor erat, a posuere eros.</div>
        </div>
    </div>
</article>

CSS

ol, ul {
    list-style: none outside;
}
.entry .work .work-features {
    display: inline-block;
    width: 180px;
}
.entry .work .work-features li {
    font-size: 15px;
    padding-bottom: 5px;
}
.entry .work .work-description {
    display: inline-block;
    width: 640px;
    font-size: 18px;
    line-height: 1.5;
}

Answer 1

您似乎尝试将vertical-align: middle添加到.work-features。您还应将其添加到.work-description以使其正常工作。

.work-features, .work-description {
  vertical-align: middle;
}

＆＃13;

ol, ul {
  list-style: none outside;
}
.entry .work .work-features {
  display: inline-block;
  width: 180px;
}
.entry .work .work-features li {
  font-size: 15px;
  padding-bottom: 5px;
}
.entry .work .work-description {
  display: inline-block;
  width: 640px;
  font-size: 18px;
  line-height: 1.5;
}
.work-features, .work-description {
  vertical-align: middle;
}

＆＃13;

<article class="post">
  <div class="entry" lang="en">
    <div class="work">
      <ul class="work-features">
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li>Cras facilisis urna in vulputate vehicula.</li>
      </ul>
      <div class="work-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum elit nec elementum tincidunt. Duis pharetra vehicula odio sit amet rhoncus. Cras id est tincidunt, dictum lacus id, venenatis orci. Nulla consequat nunc nec nisl blandit, non porta ipsum rhoncus. Praesent eleifend bibendum dignissim. Pellentesque a scelerisque dolor, nec auctor eros. Nam eu nunc nisl. Quisque sed varius lorem. Suspendisse a tellus vel lacus elementum mollis ac ut turpis. Morbi scelerisque viverra dignissim. Curabitur id semper nisi, in eleifend elit. Pellentesque dapibus auctor erat, a posuere eros.</div>
    </div>
  </div>
</article>

＆＃13;

中间垂直对齐内联块没有设置高度

1 个答案: