Question

我创建了以下小提琴来说明问题http://jsfiddle.net/spjvo6g2/

如何将诸如activelist之类的子div停靠在垂直对齐父div的顶部

<div class="lists">
        <div id="activelist">
            <label for="">To buy</label>
            <ul>
                <li class="activeitem">brocoli</li>
                <li class="activeitem">spinach</li>
                <li class="activeitem">mushrooms</li>
            </ul>
        </div>
        <div id="deferredlist">
            <label for="">Deffered</label>
            <ul>
                <li class="deferreditem">shoes</li>
            </ul>
        </div>
        <div id="completedlist">
            <label for="">Done</label>
            <ul>
                <li class="doneitem">bread</li>
                <li class="doneitem">milk</li>
                <li class="doneitem">popcorn</li>
                <li class="doneitem">chicken</li>
            </ul>
        </div>
    </div>


.lists div
{
 display: inline-block;
 margin: 0 4em;     
}

Answer 1

.lists div{
    display: inline-block;
    margin: 0 4em;  
    vertical-align:top; <-- add this
}

演示 - http://jsfiddle.net/spjvo6g2/2/

＆＃13;

.lists div {
  display: inline-block;
  margin: 0 4em;
  vertical-align:top;
}

＆＃13;

<div class="lists">
  <div id="activelist">
    <label for="">To buy</label>
    <ul>
      <li class="activeitem">brocoli</li>
      <li class="activeitem">spinach</li>
      <li class="activeitem">mushrooms</li>
    </ul>
  </div>
  <div id="deferredlist">
    <label for="">Deffered</label>
    <ul>
      <li class="deferreditem">shoes</li>
    </ul>
  </div>
  <div id="completedlist">
    <label for="">Done</label>
    <ul>
      <li class="doneitem">bread</li>
      <li class="doneitem">milk</li>
      <li class="doneitem">popcorn</li>
      <li class="doneitem">chicken</li>
    </ul>
  </div>
</div>

＆＃13;

对接div在父div的顶部垂直显示为内联块

1 个答案: