列表项目进入底部

Question

我以内联块方式显示了3个div。他们每个人都有一个简单的链接列表。东西是第二个列表只有一个项目。

它的样子：

它的外观：

感谢您的任何建议！

.column_links{
    display: inline-block;
    width:28%;
    margin-right:60px;
}
.column_social{
    width:29%;
    display: inline-block;
    margin-right:60px;
}
.column_new{
    display: inline-block;
}

Answer 1

使用 vertical-align：top

试试这个Jsfiddle

.column_new,
.column_social,
.column_new{
   vertical-align: top;
 }

Answer 2

使用需要为vertical-align:top设置display:inline-block。

因为默认值为vertical-align:baseline。所以，你的div到底了。

.column_new,
.column_social,
.column_new{
   vertical-align: top;
}

这是Demo Link

Answer 3

.column_links {
  display: inline-block;
  width: 28%;
  margin-right: 60px;
}
.column_social {
  width: 29%;
  display: inline-block;
  margin-right: 60px;
  vertical-align: top;
}
.column_new {
  display: inline-block;
}

<div class="column_links">
  <h3>
LINKS
</h3>
  <hr>
  <ul>
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
    <li>list 4</li>
    <li>list 5</li>
  </ul>
</div>
<div class="column_social">
  <h3>
FIND ME
</h3>
  <hr>
  <ul>
    <li>list 1</li>
  </ul>
</div>
<div class="column_new">
  <h3>
NEW
</h3>
  <hr>
  <ul>
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
    <li>list 4</li>
    <li>list 5</li>
  </ul>
</div>

这里是jsfiddle：demo