HTML CSS两列布局，子列位于左列

我想得到下面的布局

 aaaaaaaaa  |  bbbb
 aaaaaaaaa  |  bbbb
  cc | dd   |  bbbb
  cc | dd   |  bbbb
  cc | dd   |  bbbb

“b”的区域应具有固定的宽度。 “a”的区域应占据剩余的可用空间。 “c”和“d”各占a宽度的50%

我可以用桌子做这件事，没有任何问题

我想你们中的一个人可以指导我如何使用div和CSS

具有基于Div的解决方案的基础

但我也需要确信这是正确的做法。 因为它是有代价的。。。 无论是在代码大小还是在开发时间

我希望这能在IE7和最新版本的chrome和FF上运行

（我刚刚读到这个讨论：我大约5年前开始讨论，我仍然不喜欢CSS浮动div…）

还有-有人知道这是如何支持的吗：

当前的代码，但它在任何方面都不稳定，我一直在玩它。。但似乎没有什么能满足我的需要：

<div id="_home_container_div" style="background-color:red;">
    <div style="float:right;background-color:violet;width:155px;margin-top:55px;margin-right:55px;marginleft:55px;">
        <div class="slideshow" style="width:100%;padding:0px auth;background-color:green;">
                       some images go here
        </div>
    <div id='caption' style="width:100%;padding:0px auth;font-size:14px; font-weight:bold; ">
        initial caption for first image
    </div>
    </div>
    <div style="float:right;margin-top:55px;background-color:blue;">
        <div class="h1text" style="float:left;">
            <h1 class="_home_main_caption">${Home.main__header}</h1>
            <p class="h1text">${Home.main1__para}</p>
            <p class="h1text">${Home.main2__para}</p>
        </div>
        <div class="h2text" style="float:left;clear:left;">
            <h2>${Home.subA__header}</h2>
            <p>${Home.subA1__para}</p>
            <p>${Home.subA2__para}</p>
        </div>
        <div class="h2text" style="float:left;clear:left;">
            <h2>${Home.subB__header}</h2>
            <p>${Home.subB1__para}</p>
            <p>${Home.subB2__para}</p>
        </div>
    </div>
</div>

这里有一些图片
第一幅图像的初始标题
${Home.main\uu头文件}
${Home.main1\uu para}
${Home.main2\uu para}
${Home.subA\uu头文件}
${Home.subA1_uupara}

${Home.subA2_uupara}

${Home.subB__头}
${Home.subB1\uu para}

${Home.subB2\uu para}

将每个区域用div括起来

为区域B指定CSS right属性，指定其固定宽度。同时设置位置：绝对。这将有效地将所有剩余部分向左移动该数量

区域A的CSS宽度为100%，区域C和D的CSS宽度各为50%。您可以用一行两列将区域C和D括在一个表中-这可能不是最干净的解决方案，但可能是将它们并排放置的最简单方法。区域C和D嵌套在区域A的DIV中。

看看这是否有帮助

代码：

我的贡献：

HTML:

以下是您试图解决的问题的一部分

唯一真正棘手的是让

.a

扩展到剩余宽度。

.wrapper

的填充宽度与右列的宽度完全相同，以容纳它。在我的示例中，我为b（如您所述）添加了一个固定宽度200px。该列（

.b

）使用负右边距（200px）将其放置在正确的位置。您提到的所有浏览器都应该以完全相同的方式呈现此解决方案

---

标记

<div class="wrapper">
  <div class="a">
    <div class="content"></div>
    <div class="c"></div>
    <div class="d"></div>
  </div>
  <div class="b">
  </div>
</div>

---

到目前为止，你有什么代码？你现在掌握的代码会很有用的。我在这里找到了我最后一个（也是-…）问题的答案：还有，对于专栏，喜欢HTML列表而不是表格列。你能解释一下为什么这里需要position:absolute吗？如果左边的内容较长，它不会在右边爬行吗？position:absolute将版面的不同部分设置为彼此独立，否则它们会相对地呈现（一个接一个）。通过设置右边，您可以为页面的其余部分设置一个边距（实际上是一个定位，但可以将其视为一个边距）。这样，它将在与右侧重叠之前进行包装。根据提供的示例，这是一个快速而肮脏的示例。似乎我缺少了一些基本宽度-我开始提供宽度，现在情况看起来好多了。谢谢。@epeleg Yea，为每个容器/列指定宽度对于此类布局很重要。很乐意帮忙：）

#cont
{
    width: 300px;
    background: yellow;
    overflow: auto;
}
#left
{
    float: left;
    width: 64%;
    background: lightblue;
}
#right
{
    width: 36%;
    background: red;
    float: right;
}

#subLeft
{
    width: 50%;
    float: left;
    background: cyan;
}
#subRight
{
    width: 50%;
    float: right;
    background: green;
}

<div class="container">
    <div class="col col-content">
        <div class="section-wrapper">
            <p>aaaaaaaaaaaaaaaaaaaaaaaaaa</p>
            <div class="section">
                <p>cccccccccccccccccccccccccccc</p>
            </div>
            <div class="section">
                <p>ddddddddddddddddddddddddddd</p>
            </div>
        </div>
    </div>
    <div class="col col-sidebar">
        <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
    </div>
</div>

.col {
    display:inline-block;
    vertical-align:top;
    background:#DFD;
}

.col-content .section {
    width:49%;
    display:inline-block;
    background:#FDD;
    word-wrap:break-word;
    vertical-align:top;
}
.col-sidebar {
    width:300px;   
}

<div class="wrapper">
  <div class="a">
    <div class="content"></div>
    <div class="c"></div>
    <div class="d"></div>
  </div>
  <div class="b">
  </div>
</div>

.wrapper {
  width: 400px;
  margin: 0 auto;
  padding-right: 200px;
}
.a {
  float: left;
  background: red;
}
.b {
  width: 200px;
  float: left;
  margin-right: -200px;
  background: green;
}
.c {
  width: 50%;
  float: left;
  background: pink;
}
.d {
  width: 50%;
  float: right;
  background: gold;
}