html - 垂直和水平对齐的两列布局，具有可变高度

Question

我想获得以下布局:
看起来当右边的盒子很小的时候，左下角的盒子想要从左边移到左上角的旁边。如果右边的盒子又满又高，那么它会将左下角的盒子推回我想要的位置。

HTML

<div class=page>
    <div id="stack-vert"> 
        <div id="stack-horz">
            <div id="message_center_content">    
                <h2> Your Messages </h2>
            </div>
            <div id="message_center_details">
            </div>
            <div id="message_center_details">
            </div>  
            <div id="clearingdiv2"></div>
        </div>
    </div>

CSS

.page{
    margin: 2em auto;
    width: 75em;
    border: 5px solid #ccc;
    padding: 0.8em; background: white; display:table;
}
#message_center_details{
    float:left;
    border: solid thin black;
    overflow:hidden;
    padding: 5px;
    width: 25%;
    background-color: #ffffcc;
    margin: 5px;
}
#message_center_content{
    float:right;
    border: solid thin black;
    padding: 5px;
    width: 60%;    
    background-color:  #F0F0F0;
    margin: 5px;
}

JS Fiddle

它在 jsFiddle 中有效，但现在在我的浏览器中!相反，左侧的两个盒子相互干扰，底部的盒子位于顶部盒子的右侧，右侧的盒子下方。

非常感谢任何帮助。

Answer 1

Something you could do

        <div id="Container">
      <div id="left">
        <div class="section">
        </div>
        <div class="section">
        </div>
      </div>
      <div id="right">
        <div id="message">
        <div style="width:100px;height:260px;background:white;">Edit this</div>
        </div>
      </div>
    </div>

    #Container {
  width: 100%;
  min-height: 300px;
  background: red;
}

#left {
  float: left;
  width: 40%;
  background: yellow;
  min-height: 300px;
  box-sizing: border-box;
  padding: 10px;
}

.section {
  width: 100%;
  display: block;
  min-height: 120px;
  background: red;
  box-sizing: border-box;
  margin-bottom: 10px;
}

#right {
  float: left;
  width: 60%;
  min-height: 300px;
  background: blue;
  box-sizing: border-box;
  padding: 10px;
}

#message {
  width: 100%;
  min-height: 200px;
  background: red;
}

请参阅 fiddle 了解我会做什么。我添加了颜色，这样你就可以看到发生了什么。 在 HTML 选项卡中调整白色 div 高度以查看消息 div(右侧的红色)调整其高度。

您的内容将放在左侧的 div 中，带有一类部分，右侧的 div id 消息。

在你知道如何自己做大多数事情之前，我会远离图书馆。

Great place to learn html/css/js and more