Question

一个非常愚蠢的简单问题，我知道，但是......抱歉：）

我有2个div，左边是一个列表，右边是详细信息。当我调整窗口大小时，右边的div浮动在第一个窗口下面，我想保持对齐，即使是滚动条。如何实现这一目标？

HTML

<div id="parent">
   <div id="list">
      ...table list...
   </div>
   <div id="details">
      ...table details...
   </div>
</div>

CSS

#parent div{
   float:left;
   clear:none;
}

Answer 1

我认为在你的CSS中添加display:inline-block会解决这个问题。

编辑：实际上，要使用此方法，您需要删除float并为这两个子元素提供此显示属性。

HTML

<div id="parent">
   <div class="my_block" id="list">
      ...table list...
   </div>
   <div class="my_block" id="details">
      ...table details...
   </div>
</div>

CSS

.my_block {
    display:inline-block;
}

Answer 2

试试这个：

CSS：

.table{
    display:table
}

.table-cell{
    display:table-cell;
}

HTML：

<div id="parent" class="table">
    <div id="list" class="table-cell">...table list...</div>
    <div id="list" class="table-cell">...table details...</div>
</div>

当您调整浏览器大小时，这将使两个div保持水平对齐。

或者保持简单......

CSS：

#parent > div{
    display:inline-block;
}

水平对齐div，停止浮动窗口大小调整

2 个答案: