HTML CSS两列的布局与子栏左栏

我想下面的布局HTML CSS两列的布局与子栏左栏

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

面积为“B”的应该有一个固定的宽度。 “a”的区域应占用剩余的可用空间。 “c”和“d”的宽度分别为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浮动的div ...）

也 - 有谁知道如何支持是这样的：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>

来源

2011-12-21 epeleg

你有什么代码，使远吗？ –

你在这一刻的代码将是有用的。 – Undefined

在这里找到了我最后（也是-...）Q的答案：http://caniuse.com/#search=multiple%20col – epeleg

看看这个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; 
}

来源

2011-12-21 21:59:20

看起来我缺少一些基本的宽度 - 我开始提供宽度，现在看起来好多了。谢谢。 – epeleg

@epeleg是的，指定每个容器/列的宽度对于这些布局非常重要。很高兴帮助:) –

裹在资料核实每个区域。

给区域B一个CSS 权利属性，指定它的固定宽度。还设置位置：绝对。这将有效地将所有剩余部分向左移动那么多。

给区域A CSS的100％宽度，以及区域C和d得到一个CSS的各50％宽度。您可以将区域C和D放在一行两列的表格中 - 它可能不是最干净的解决方案，但它可能是最简单的方法。区域C和D嵌套在区域A的DIV内。

来源

2011-12-21 21:57:14 Gigi

另外，对于列，请在表格列上使用HTML列表。 – Gigi

你能解释为什么是位置：绝对需要在这里？ – epeleg

也 - 如果它的更长时间不会从左侧爬到右侧的内容？ – epeleg

我的贡献：

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

来源

2011-12-21 22:01:49 PseudoNinja

这看起来很糟糕o.O –

只是一个快速和肮脏的基础上提供的例子。 – PseudoNinja

这里是你正在试图解决这个问题的一个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; 
}

来源

2011-12-21 22:03:56 nheinrich

HTML CSS两列的布局与子栏左栏

回答

相关问题