html - 将两个 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:right 到左右容器。

我认为这会奏效。

Answer 4

解决了我已经用<section>

谢谢

/*** 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%;
}