如何使用html和css创建此特定布局？_Html_Css_Google Chrome

如何使用html和css创建此特定布局？

html css google-chrome

如何使用html和css创建此特定布局？,html,css,google-chrome,Html,Css,Google Chrome,我怎样才能在HTML/CSS中实现这一点没有javascript！！：所有东西都应该在一个具有流体宽度的div内它只需要在Google Chrome中工作我就是搞不懂。这是一个好的开始：在这之后，需要固定高度的div不需要太多工作。这是一个好的开始：你需要固定高度的潜水舱在那之后应该不需要太多的工作。我不喜欢它的某些地方，但它确实有用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

我怎样才能在HTML/CSS中实现这一点没有javascript！！：

所有东西都应该在一个具有流体宽度的div内

它只需要在Google Chrome中工作

我就是搞不懂。这是一个好的开始：

在这之后，需要固定高度的div不需要太多工作。

这是一个好的开始：

你需要固定高度的潜水舱在那之后应该不需要太多的工作。

我不喜欢它的某些地方，但它确实有用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
        body
        {
            padding: 0;
            margin: 0;
        }

        #content
        {
            background-color: #cccccc;
            min-height: 100%;
        }

        #header
        {
            height: 40px;
            background-color: #666666;
        }

        #left
        {
            float: left;
            width: 33%;
        }

        #mid
        {
            margin: 0 33%;
            background-color: #6666ff;
        }

        #right
        {
            float: right;
            width: 33%;
            margin-top: -50px;
        }

        .fixedHeight
        {
            height: 50px;
            background-color: #ffff33;
        }

        #left .fixedHeight
        {
            margin-right: 10px;
            margin-bottom: 10px;
        }

        #right .fixedHeight
        {
            margin-left: 10px;
        }

        .clear
        {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="header">
        header
    </div>
    <div id="content">
        <div id="left">
            <div class="fixedHeight">
                fixed
            </div>
            <div class="fixedHeight">
                fixed
            </div>
        </div>
        <div id="mid">
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
        </div>
        <div class="clear"></div>
        <div id="right">
            <div class="fixedHeight">
                fixed
            </div>
        </div>
    </div>
</body>
</html>

我有点不喜欢，但确实管用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
        body
        {
            padding: 0;
            margin: 0;
        }

        #content
        {
            background-color: #cccccc;
            min-height: 100%;
        }

        #header
        {
            height: 40px;
            background-color: #666666;
        }

        #left
        {
            float: left;
            width: 33%;
        }

        #mid
        {
            margin: 0 33%;
            background-color: #6666ff;
        }

        #right
        {
            float: right;
            width: 33%;
            margin-top: -50px;
        }

        .fixedHeight
        {
            height: 50px;
            background-color: #ffff33;
        }

        #left .fixedHeight
        {
            margin-right: 10px;
            margin-bottom: 10px;
        }

        #right .fixedHeight
        {
            margin-left: 10px;
        }

        .clear
        {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="header">
        header
    </div>
    <div id="content">
        <div id="left">
            <div class="fixedHeight">
                fixed
            </div>
            <div class="fixedHeight">
                fixed
            </div>
        </div>
        <div id="mid">
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
        </div>
        <div class="clear"></div>
        <div id="right">
            <div class="fixedHeight">
                fixed
            </div>
        </div>
    </div>
</body>
</html>

尝试使用css网格，如。这将解决所有宽度问题。然后，对于底部div，您只需要一些绝对定位设置，就可以了。

因为装饰框的高度是固定的，所以您可以绝对定位它们。右下角的那个。这应该是自我解释：

.orange-box {
  width:33%;
  height:100px;
  position:absolute;
}

.orange-box.top-left-1 { top:0; left:0; }
.orange-box.top-left-2 { top:100px; left:0; }
.orange-box.bottom-right { bottom:0; right:0; }

蓝色区域应该是另一个具有

width:33%;
margin:0 auto

由于装饰盒的高度是固定的，所以您可以绝对地定位它们。右下角的那个。这应该是自我解释：

.orange-box {
  width:33%;
  height:100px;
  position:absolute;
}

.orange-box.top-left-1 { top:0; left:0; }
.orange-box.top-left-2 { top:100px; left:0; }
.orange-box.bottom-right { bottom:0; right:0; }

蓝色区域应该是另一个具有

width:33%;
margin:0 auto

@B主人

嘿，老兄，我四处闲逛，终于找到了你想要的东西。。。看一看:

对我来说，最困难的部分是让文本规定整个东西的高度，但在我停止尝试使用浮动后，一切都解决了

尝试添加更多文本等。。它应该有用

编辑：我不确定您是否希望在顶部有一个“标题”，但我在这里放了一个：*请注意，它位于包装器外部，否则侧柱会变得太高

@Bmaster

嘿，老兄，我四处闲逛，终于找到了你想要的东西。。。看一看:

对我来说，最困难的部分是让文本规定整个东西的高度，但在我停止尝试使用浮动后，一切都解决了

尝试添加更多文本等。。它应该有用

编辑：我不确定您是否希望在顶部有一个“标题”，但我在这里放了一个：*请注意，它位于包装器外部，否则侧柱会变得太高

在回顾了其他似乎没有完全达到你想要的答案后，我决定加入我自己的答案

比解决问题更重要的是帮助你理解解决方案，这需要理解和理解

列由页脚清除，页脚当前不包含任何内容，但有助于将页面大小扩展到包装器之外

页面元素是相对定位的，因此绝对定位的子元素将相对于页面元素而不是主体进行定位。

在查看了其他答案后，我决定加入我自己的答案

比解决问题更重要的是帮助你理解解决方案，这需要理解和理解

列由页脚清除，页脚当前不包含任何内容，但有助于将页面大小扩展到包装器之外

页面元素是相对定位的，因此绝对定位的子元素将相对定位，而不是身体。

我看不出这如何帮助我解决最烦人的问题，即如何让盒子粘到底。我看不出这如何帮助我解决最烦人的问题，即如何让盒子粘到底。+1对于一个好的CSS挑战：+1对于一个好的CSS挑战：谢谢你帮助我理解，+1谢谢你帮我理解，+1