Question

我相信我会问一个非常常见的问题，因为在发布我之前我也看过相关的问题，但这有点不同。通常我在垂直扩展2个div时不会遇到任何问题，但现在我正在使用bootstrap框架处理应用程序。这是一个流畅的布局，这就是我面临一些问题的原因。请提出解决方案。这是我用过的：

HTML：

<div class="main">
  <div class="left">content</div>
  <div class="right">content</div>
</div>

CSS：

.left{ 
    position:absolute; 
    left:0px; 
    border-right:1px solid #bfc4c9;  
    background:#ebf2f9; 
    width:280px !important;
}

.right{ 
    display:block;  
    float:left; 
    position:relative;  
    padding-right:9px; 
    margin-left:300px;  

}

我想垂直对齐左右div。内容进入正确的div，所以我希望左面板高度随着右面板的高度增长，并且因为它是流体布局，所以只有左面板宽度是固定的，因此我无法在右面板中定义宽度。

Answer 1

使用左侧列上的绝对位置 - 顶部，底部，左侧和右侧 - 似乎有效：

http://jsfiddle.net/ArbVp/

需要将主要div放在相对位置，并在列下添加一个清除。

Answer 2

@DBUK：
由于没有足够的声誉点，我无法在您的帖子中添加评论我更新了你的小提琴： http://jsfiddle.net/ArbVp/50/

在这种情况下，绝对不需要以任何方式使用'float'。还有一些其他的CSS值是“可有可无的”......！ ;-)

干杯
冈瑟

如何在响应式布局中垂直扩展2个div？

2 个答案: