将两个div并排放置，一个伸展以占据空间

Question

我正在尝试使用div完成下面的布局。我目前的代码效果不佳。我该怎么办？

由于

当前代码：jsfiddle

我的代码中的实际项目是：

#body_block
{
    background-color: #B8B8B8;
}
#body
{
    background-color: #BFBFBF;
}
#body_left
{
    float: left;
    margin-right: 50px;
    background-color: #FFE0F8;
}
#body_right
{
    background-color: #E1FFE0;
}

Answer 1

在你身上

#body_right
{  
    float:left;
    background-color: #E1FFE0;
}

你还需要添加浮动左侧设置，然后在你的footer_block上你需要添加一个 clear：both ;

   #footer_block
  {
       clear:both;
   background-color: #B3B3B3;
 }

应该可以帮助你开始

Answer 2

1，使用绝对像http://jsfiddle.net/yujiangshui/uz9NF/7/

2，使用jquery，当$（window）.load（）给出低高度div另一个div的高度

3，使用以下代码：

<div class="out">
  <div class="div1">
    div1
  </div>
  <div class="div2">
    div2
  </div>
</div>

和css：

.out{overflow:hidden; width:650px; margin:0 auto;}
.div1{padding-bottom: 5000px; margin-bottom: -5000px; width:490px; background:#ff1; float:left; margin-right:10px;height:400px;}
.div2{padding-bottom: 5000px; margin-bottom: -5000px; width:150px; background:#ccc; float:left;height:800px;}

4，使用<table>

虽然我的英语很差，但希望我的回答可以给你一些帮助！

Answer 3

你还要添加css的位置属性

我的意思是位置：相对;到两个左右分界所在的外部分区。

然后使用相同的float：left和float：分别对着左右容器。

我认为这会奏效。

Answer 4

解决 我用<section>

包装了两个div

由于

/*** BODY-MYACCOUNT *************************/
section { display: table; width: 100%;}
section div { display: table-cell; border: 1px solid #000; }
#body_left
{
    background-color: #FFE0F8;margin-right: 50px;
}
#body_right
{
    background-color: #E1FFE0;width: 100%;
}