Question

我想获得以下布局

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

＆＃34; b＆＃34;的区域应该有固定的宽度。＆＃34; a＆＃34;的区域应占用剩余的可用空间。＆＃34; c＆＃34;＆＃34; d＆＃34;获得每个宽度的50％。

我可以毫无问题地使用表格。

我猜你们其中一个人可以指导我如何用DIV和CSS做这件事。

http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm 看起来像是基于Div的解决方案的基础。

但我也需要确信这是正确的做法。因为它确实带来了价格...... 代码大小和开发时间......

我希望这适用于IE 7及最新版本的chrome和FF。

（我刚读过这个讨论：http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_21694743.html我大概5年前开始，我还是不喜欢CSS Floating divs ...）

也 - 有人知道这有多支持：http://www.w3.org/TR/css3-multicol/？

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

<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>

Answer 1

查看此jsfiddle是否可以帮助您。

代码：

<div id="cont">
    <div id="left">
        aaaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaaa
        <div id="subLeft">
            cc cc cc cc cc cc cc
        </div>
        <div id="subRight">
            dd dd dd dd dd dd dd
        </div>
    </div>
    <div id="right">
        bbbb bbbb bbbb bbbb bbbb bbbb bbbb bbbb bbbb bbbb
    </div>
</div>

的CSS：

#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;
}

Answer 2

在DIV中包裹每个区域。

为区域B指定CSS 右属性，指定其固定宽度。同时设置 position：absolute 。这将有效地将所有其余部分向左移动。

区域A的CSS 宽度为100％，区域C和D的CSS 宽度各为50％。您可以将区域C和D包含在一行和两列的表中 - 它可能不是最干净的解决方案，但它可能是最简单的并排获取方法。区域C和D嵌套在区域A的DIV中。

Answer 3

我的贡献：

HTML：

<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>

CSS：

.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;   
}

jsFiddle

Answer 4

以下是您要解决的问题Fiddle。

唯一真正棘手的问题是让.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>

<强>样式

.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;
}

HTML CSS两列布局，左列中有子列

4 个答案: