html - 如何得到不多加一个div的效果？

Question

我想要得到的效果如下:

我无法用我的 CSS 代码(代码 1)获取它:

#content{
  position:relative;
  width:873px;
  height:330px;
  border:1px solid red;
}
#content_left{
  float:left;
  width:400px;
  height:300px;
  border:1px solid red;
}
#content_right{
  float:left;
  width:469px;
  height:300px;
  border:1px solid red;
}

<div id="content">content
  <div id="content_left">content_left
  </div>
  <div id="content_right">content_right
  </div>
</div>

我得到的是以下内容:

我可以添加div来打包内容得到效果(代码2):

#content{
  width:873px;
  height:330px;
  border:1px solid red;
}
#up {
  width:873px;
  height:30px;
}
#content_left{
  float:left;
  width:400px;
  height:300px;
  border:1px solid red;
}
#content_right{
  float:left;
  width:469px;
  height:300px;
  border:1px solid red;
}

<div id="content">
  <div id="up">content</div>
  <div id="content_left">content_left
  </div>
  <div id="content_right">content_right
  </div>
</div>

现在我的问题是:如果我不添加一个 div 来打包文本 content，如何修复代码 1 以获得所需的结果？

Answer 1

对于(code1)

---

table-cell 可以代替 float

#content {
           width: 873px;
           border: 1px solid red;
         }
         #content_left {
           width: 400px;
         }
         #content_right {
           width: 469px;
         }
         #content_left,
         #content_right {
           display: table-cell;
           /*border: 1px solid red;*/
           box-shadow: -1px -1px red;/* redrawn borders */
           height: 300px;
           margin: 0;
         }

<div id="content">content
  <div id="content_left">content_left
  </div>
  <div id="content_right">content_right
  </div>
</div>