Question

我的html看起来大致像这样

<div>
  <div id="header"></div>
  <div id="chart"></div>
  <div id="legend"></div>
  <div id="info1"></div>
  <div id="info2"></div>
  <div id="info3"></div>
</div>

我想像这样定位元素： positioning

我如何在世界上这样做？

编辑：这是一个关于“正确的方法”的问题，而且当然不容易谷歌。基本上我想要做的，而不是在html中定义列，是为容器div定义一个高度，然后让其他div自然地在其中定位。

Answer 1

这是开始的事情：

<强> HTML

<div id="header"></div>
<div id="left-column">
    <div id="chart"></div>
    <div id="legend"></div>
</div>
<div id="right-column">
    <div id="info1"></div>
    <div id="info2"></div>
    <div id="info3"></div>
</div>
<div class="clear"><!-- --></div>

<强> CSS

#left-column{position:relative;float:left;width:50%;}
#right-column{position:relative;float:right;width:50%;}
.clear{clear:both;}

Answer 2

您使用了许多很酷的内容，例如float和position。

或者，如果您正在寻找可以完成大部分工作的可靠框架，请查看Blueprint CSS，其中包含您可能会发现的多种网格布局。

以下是您可能会发现有用的更多资源：

Answer 3

以下代码将允许您定位DIV而无需任何其他HTML标记：

//* in order to view the results */
div#header, div#chart, div#legend,
div#info1, div#info2, div#info3
{ border: 1px solid black; }

/* IE requirement to center on screen */
body { text-align: center; }

/* define container size */
div
{
 width: 500px;
 margin: auto; 
 padding: 0;
 text-align: center;
}


/* for header, just define the size */
div#header
{
 width: 500px;
 height: 50px;
}

/* chart and legend are left floating
   and do not allow other elements to their left */
div#chart
{
 width: 248px;
 height: 250px;
 float: left;
 clear: left;
}
div#legend
{
 width: 248px;
 height: 202px;
 float: left;
 clear: left;
}

/* cover the rest with info divs */
div#info1, div#info2, div#info3
{
 width: 248px;
 display: block;
 height: 150px;
 margin-left: 248px;
}

你会注意到一些奇怪的尺寸测量;这是一种努力，以打击浏览器处理不同如何测量元素的方式（如果它们应该包括边框）。最终渲染几乎与我测试的三个浏览器相同（IE8，FF3.5，O10）。

完整测试HTML：

<html>
<head>
<style>

div#header, div#chart, div#legend,
div#info1, div#info2, div#info3
{ border: 1px solid black; }

body { text-align: center; }

div { width: 500px; margin: auto; padding: 0; text-align: center; }

div#header { width: 500px; height: 50px; }
div#chart  { width: 248px; height: 250px; float: left; clear: left; }
div#legend { width: 248px; height: 202px; float: left; clear: left; }

div#info1, div#info2, div#info3
{ width: 248px; display: block; height: 150px; margin-left: 248px; }

</style>
</head>
<body>

<div>
  <div id="header">header</div>
  <div id="chart">chart</div>
  <div id="legend">legend</div>
  <div id="info1">info1</div>
  <div id="info2">info2</div>
  <div id="info3">info3</div>
</div>

</body>
</html>

Answer 4

根据问题编辑进行编辑

看到你的HTML，我最大的建议就是嵌套一些div以获得你想要的控制权。虽然我在下面的示例中没有使用您的特定ID，但是嵌套应该向您展示如何调整您所拥有的内容。（我希望！）

原始答案

为了帮助你，我将不得不对你要做的事做一些假设。排队底部将是最难的部分，所以我将继续前进并假装它不是你展示的漂亮的漂亮方块。（我仍然无法在不诉诸表格的情况下对底部进行排序。虽然我相信一些框架，如Josh's answer中提到的框架，但可能能够实现这一点。）

因此，为了保持生活相对简单，我要做的假设是：

您需要有一个总体标题
您需要左栏和右栏
右栏中有三个独立元素
左栏中有两个独立的元素

为了让生活更轻松，我不打算将样式表分解为自己的CSS文件;我将假设您已经知道CSS和HTML，并且能够根据我将要抛弃的基本HTML布局适当地移动它们。

所以基本布局可能看起来像这样：

<html>
    <head><!-- blah blah blah --></head>
    <body>
        <!-- the overall container -->
        <div style="width: 500px; margin-left: auto; margin-right: auto;">

            <!-- the header -->
            <div style="width: 100%; height: 100px;">
                My headery goodness here
            </div>

            <!-- the left column -->
            <div style="float: left; width: 320px;">
                <div>
                    My charty goodness here
                </div>
                <div>
                    My legendary goodness here
                </div>
            </div>

            <!-- the right column -->
            <div style="float: left; width: 180px;">
                <div>
                    Info 1
                </div>
                <div>
                    Info 2
                </div>
                <div>
                    Info 3
                </div>
            </div>
        </div>
    </body>
</html>

您需要对尺寸进行调整并添加padding以进行品尝，如果您确实希望底部对齐，我建议您设置明确的height，min-height，{{所有max-height上的1}}和overflow属性。

最后，你真的想要将我在这里嵌入的CSS分离到一个单独的CSS文件中的相应ID或类选择器中。这只是一个粗略的哈希，让你开始布局;这绝不是一个完整的答案。

Answer 5

这可能不是您正在寻找的。我只花了几分钟就可以了。如果您可以控制div元素在页面上的显示方式，那就太难了。

<!-- The following shows your desired html structure -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    background: #778899;
    min-width: 720px;
    max-width: 1020px;
}
#header {
    background-color:black;
    color:white;
    height:150px;
}
#chart {
    float:left;
    height:120px;
    width:50%;
    background-color:green;
    top:150px;
}
#legend {
    float:left;
    height:230px;
    width:50%;
    background-color:yellow;
}
#info1 {
    float:right;
    height:150px;
    width:50%;
    background-color:red;
    top:150px;}
#info2 {
    float:right;        
    height:150px;
    width:50%;
    background-color:black;
    color:white;}
#info3 {
    float:right;        
    height:150px;
    width:50%;
    background-color:yellow;}
</style>
</head>
<body>
<div style="width:500px;margin-left:150px;margin-left:160px;">
  <div id="header">BLACK</div>
  <div id="chart">green</div>
  <div id="info1">red</div>
  <div id="legend">yellow</div>
  <div id="info2">black</div>
  <div id="info3">yellow</div>
</div>
</body>
</html>

Answer 6

http://www.amazon.com/HTML-Utopia-Designing-Without-Tables/dp/0975240277/ref=sr_1_3?ie=UTF8&s=books&qid=1256937368&sr=8-3

是开始使用CSS的好地方。

让我让你从右脚开始，但学习这些东西的最好方法是做。

当我刚开始时，我绝对在CSS中吸了，现在我对它很熟悉，因为我练习很多。

CSS

#header {
   width: 100%;
   height: 100px;
}

HTML

<div id="header"></div>

Answer 7

<div>
  <div id="header"></div>
  <div style="float:left;width:50%;">
    <div id="chart"></div>
    <div id="legend"></div>
  </div>
  <div style="float:left;width:50%;">
    <div id="info1"></div>
    <div id="info2"></div>
    <div id="info3"></div>
  </div>
  <div style="clear:both;"></div>
</div>

Answer 8

在Safari中适用于我的一个选项是：

#header {
  height: 50px;
  background-color: #000000;
}  

#chart, #legend {
  float: left;
  clear: left;
  width: 50%;
}

#chart {
  height: 150px;
  background-color: #ff33ff;
}

#legend {
  height: 75px;
  background-color: #33ffff;
}

#info1, #info2, #info3 {
  float: right;
  clear: right;
  width: 50%;
  height: 75px;
}

#info1 {
  margin-top: -150px;
  background-color: #ffff33;
}

#info2 {
  margin-top: -75px;
  background-color: #ffccff;
}

#info3 {
  background-color: #66ff66;
}

我选择了任意高度，因此需要调整实现，但我认为CSS的调整非常明确。

Answer 9

我的问题中没有看到任何HTML。

您的问题的答案取决于您是想要liquid还是静态设计。

Answer 10

问题是你最终将布局逻辑注入html。

好好发现！

事实是：CSS定位功能并不强大，无法实现所有可能的布局，特别是当您处理复杂的液体布局和双重布局时 - 特别是在您的示例中似乎是这样的情况下，您想要达到高度不相关的，基于大小的内容元素。

是的，有许多常见情况的解决方法，例如“相同高度列”黑客和由嵌套浮动和清除构成的网格。但这几乎总是需要为布局量身定制标记。有时你可以通过思考描述包含元素如何相关的“好”类名来隐藏它;更常见的是，你最终会遇到像class="left_column"这样的肮脏。

简单的布局可以使用相对较少的虚假包装div和重新排序来完成，因此仍然比表格更好一些。但对于像你的例子那样的可变大小的东西，它实际上是不可能的;与仅使用表格相比，存在的黑客行为会更深入，更难以维护。因此，只要你使用table-layout: fixed使它们稳定且快速地渲染，并且不要像过去的Netscape 4恐怖一样开始嵌套表格，那就继续把它们塞进一个表中。

直到CSS提供完全布局/标记独立性的圣杯 - 这就是CSS3 might deliver几十年来的事情！ - 您仍然偶尔需要使用桌子。没有羞耻。

Answer 11

正如其他地方所指出的那样，添加额外的容器div作为列是可行的方法。虽然您的HTML中有布局逻辑可能没有吸引力，但这是目前公认的做法。并且比使用表格布局更好。

或者，您可以采用静态方法并使用绝对定位。

Answer 12

这适用于FF，Chrome和IE8 ......不确定旧IE和其他浏览器

<style type="text/css">
 #container { width: 95%; height: 95%; margin: 0 auto; overflow: auto; }
 #header { height: 9%; background: #444; }
 #chart  { width: 50%; height: 70%; float: left;  background: #555; }
 #legend { width: 50%; height: 20%; float: left;  background: #666; }

 #info1  { width: 50%; height: 30%; float: right; background: #111; }
 #info2  { width: 50%; height: 30%; float: right; background: #222; }
 #info3  { width: 50%; height: 30%; float: right; background: #333; }
</style>

<div id="container">
 <div id="header">Header</div>
 <div id="chart">Chart</div>
 <div id="info1">Info 1</div>
 <div id="info2">Info 2</div>
 <div id="info3">Info 3</div>
 <div id="legend">Legend</div>
</div>

*注意：我必须将overflow：auto添加到容器中，以使其在IE中运行。

如何使用CSS来定位div？

12 个答案:

根据问题编辑进行编辑

原始答案