Question

我的页面布局有问题。我正在尝试做一个标题，3列，页脚布局，全部居中。这是我的代码：

的CSS：

#pgCenter
{
    text-align:center;
    margin: 20px;
}

#container
{
    text-align:left;
    width: 850px;
    margin: 0 auto;
}

#container #header
{
    width:100%;
    text-align:center;
}

#container #col1
{
    width: 250px;
    float: left;
}

#container #col2outer
{
    width: 600px;
    float:right;
}

#col2outer #col2mid
{
    width: 300px;
    float: left;
}

#col2outer #col2side
{
    width: 300px;
    float: right;
}

#container #footer
{
    text-align:center;
    width: 100%;
}

HTML：

<body>
  <div id="pgCenter">
  <form id="form1" runat="server">
    <div id="container">
      <div id="header">
        here is my header
      </div>
      <div id="col1">
        This is where the login control goes. For testing purposes, I'll just throw some text in here.
      </div>
      <div id="col2outer">
        <div id="col2mid">
          <p>INSIDE DIV ID:col2mid - And here is some more placehold text so that I can see how this div is laying out!
            I should also write some more text here because I still don't see anything going on :(</p>
        </div>
        <div id="col2side">
          <p>INSIDE DIV ID:col2side - What else do you want me to put? I can't even think of anything right now except
            eating some bomb delicious wingstop. I can't wait to get my paws on those saucy spicy cajun flavored mudda fuggas!</p>
        </div>
      </div>
      <div id="footer">
        <p>(footer) Copyright © 2011</p>
      </div>
    </div>
  </form>
  </div>
</body>

我遇到的问题是页眉和页脚内容要根据内容的大小而不是所有列显示在第一列或外部（col2outer）列的上方和下方以一种整齐的方式。此col2outer div也比第一列低1 <br/>。

我看过这里和其他地方的几篇帖子，找不到合适的帮助。我不是很擅长CSS，并且会喜欢我可以获得最佳实践的建议和提示，我做错了什么等等。非常感谢你。

PS - 请原谅我的占位文本嘿嘿。

Answer 1

要解决第一个问题，您只需要将clear: both添加到#container #footer，以清除其上方的浮动广告。

#container #col2outer问题是因为默认情况下，p元素内部设置了margin。

此外，您应该从所有选择器的开头删除无关的#container。

所有这些变化：http://jsfiddle.net/thirtydot/z4U3d/

Answer 2

使用overflow：hidden： http://jsfiddle.net/zDbsQ/1/

enter image description here

Answer 3

你做得太多了

    #pgCenter
    {
        text-align:center;
        margin: 20px;
    }

    #container
    {
        text-align:left;
        width: 960px;
        margin: 0 auto;
    }

    #header
    {
        width:100%;
        text-align:center;
    }


    #footer
    {
        text-align:center;
        width: 100%;
    }
    .oneThirdContainer {
        width: 300px;
        float: left;
    }

    .clear {
        clear: both;
    }
        </style>
      <div id="pgCenter">
      <form id="form1" runat="server">
        <div id="container">
          <div id="header">
            here is my header
          </div>
          <div class="oneThirdContainer">
            <p>This is where the login control goes. For testing purposes, I'll just throw some text in here.</p>
          </div>

            <div class="oneThirdContainer">
              <p>INSIDE DIV ID:col2mid - And here is some more placehold text so that I can see how this div is laying out!
                I should also write some more text here because I still don't see anything going on :(</p>
            </div>
            <div class="oneThirdContainer">
              <p>INSIDE DIV ID:col2side - What else do you want me to put? I can't even think of anything right now except
                eating some bomb delicious wingstop. I can't wait to get my paws on those saucy spicy cajun flavored mudda fuggas!</p>
            </div>
          <div class="clear"></div>
          <div id="footer">
            <p>(footer) Copyright © 2011</p>
          </div>
        </div>
      </form>
      </div>
    </body>

Answer 4

我不会试图指出我认为你的错误，而是告诉你我将如何做到这一点。

基本上，你描述了3行，中心行分为3列。

<!-- HTML -->
<div id="header">header</div>
<div id="middle">
    <div id="col1">col 1</div>
    <div id="col2">col 2</div>
    <div id="col3">col 3</div>
</div>
<div id="footer">footer</div>

所以，你想要做的是将header和footer置于你感觉舒服的大小，然后让中间占据空间。作为示例（您需要调整大小）：

/* CSS */
body {width:460px;}
body * {margin:0px; padding:0px;}
#header {width: 960px; max-width:960px; height:100px; border:1px solid black;}
#middle {width: 960px; max-width:960px; max-height:800px; border:1px solid black;}
#footer {width: 960px; max-width:960px; height:100px; border:1px solid black;}
#col1 {width:315px; height:100px; border:1px solid black; display:inline-block;}
#col2 {width:316px; height:100px; border:1px solid black; display:inline-block;}
#col3 {width:315px; height:100px; border:1px solid black; display:inline-block;}

这应该col1，col2和col3内联middle。我只包括边框来举例说明他们的位置...

你有它 - 简单的三栏布局。不是最优雅，但它会做到。对于更优雅的，请查看：

http://www.alistapart.com/articles/holygrail/

使具有3列布局的页面居中

4 个答案: