Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/40.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何使用CSS定位div？_Css - Fatal编程技术网
Fatal编程技术网
  • css/
  • 如何使用CSS定位div？

如何使用CSS定位div？

css

如何使用CSS定位div？,css,Css,我有一个大致如下的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>

我有一个大致如下的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>
我想将这些元素定位如下：

我到底该怎么做呢

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

是从CSS开始的好地方

让我让你从正确的角度出发，但是学习这些东西的最好方法是通过实践。

当我第一次开始学习CSS的时候，我非常喜欢CSS，现在我对它相当满意，因为我练习了很多

CSS

HTML

你使用了很多很酷的东西，比如
浮动
和
定位

或者，如果您正在寻找一个能够为您完成大部分工作的可靠框架，请查看，它有几个网格布局，您可能会发现它们是适用的

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

    • 我在你的问题中没有看到任何HTML

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

      以下是一些开始：

      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>
      基于问题编辑的编辑 看到您拥有的HTML，我最大的建议是嵌套一些div以获得您想要的控件。虽然我在下面的示例中没有使用您的特定ID，但嵌套应该向您展示如何根据您想要的位置调整您所拥有的。（我希望如此！）

      原始答案 为了帮助你，我必须对你要做的事情做出一些假设。排列底部将是最难的部分，所以我将继续假装这不是你展示的漂亮正方形。（我仍然不能不借助于表格来做底部衬里。尽管我相信一些框架，如中提到的框架，可能能够实现这一点。）

      因此，为了使生活相对简单，我将做出如下假设：

      • 您需要有一个总标题
      • 您需要一个左栏和一个右栏
      • 右列中有三个离散元素
      • 左列中有两个离散元素
      为了让生活更轻松，我不打算将样式表分解成它们自己的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>

      
我的天哪
我的天哪
我传说中的天哪
信息1
信息2
信息3
      您需要调整尺寸并添加
      padding
      以增加味道，如果您确实希望底部对齐，我建议在所有
      div
      上设置显式
      height
      、
      minimin height
      、
      max height
      和
      overflow
      属性

      最后，再次强调，您确实希望将我在这里嵌入的CSS分离到单独CSS文件中相应的ID或类选择器中。这只是一个粗略的拼凑，让你开始布局；这决不是一个完整的答案。

      这可能不是你想要的。我只花了几分钟。如果您可以控制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>

      
html，正文{
保证金：0；
填充：0；
背景#778899；
最小宽度：720px；
最大宽度：1020px；
}
#标题{
背景色：黑色；
颜色：白色；
高度：150像素；
}
#图表{
浮动：左；
高度：120px；
宽度：50%；
背景颜色：绿色；
顶部：150px；
}
#传奇{
浮动：左；
高度：230像素；
宽度：50%；
背景颜色：黄色；
}
#信息1{
浮动：对；
高度：150像素；
宽度：50%；
背景色：红色；
顶部：150px；}
#信息2{
浮动：对；
高度：150像素；
宽度：50%；
背景色：黑色；
颜色：白色；}
#信息3{
浮动：对；
高度：150像素；
宽度：50%；
背景色：黄色；}
黑色
绿色
红色
黄色的
黑色
黄色的
      问题在于，最终会将布局逻辑注入html

      好样的

      事实是：CSS定位并不能满足所有可能的布局，特别是当您处理复杂的流动布局时，尤其是在您的示例中，您希望将不相关的、基于内容元素的大小的高度绑定在一起时

      是的，对于许多常见的情况都有变通方法，例如“相同高度的柱”和由嵌套的浮动和清除组成的网格。但这几乎总是需要根据布局定制标记。有时，您可以通过考虑描述所包含元素的相关关系的“好”类名来隐藏这一点；更常见的情况是，你最终会得到像
      class=“left\u column”
      这样的肮脏

      简单的布局可以用相对较少的虚假包装器div和重新排序来完成，因此最终还是比表好一点。但是对于像你的例子一样大小可变的东西，这是不可能的；与仅仅使用一个表相比，存在的黑客最终会更深入，更不易维护。那就去吃面包吧 
      #left-column{position:relative;float:left;width:50%;}
#right-column{position:relative;float:right;width:50%;}
.clear{clear:both;}

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

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

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

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

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

      //* 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;
}

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