0

我有这个 HTML 代码

<body>
    <div id="container">
        <div id="header">
            <ul>
                <li><a href="index.php" class="active"><span>Home</span></a></li>
                <li><a href="login.php" class="active"><span>Login</span></a></li>
                <li><a href=""><span>Left Menu</span></a></li>
            </ul>
        </div>

        <div class="threecol">
            <div class='col3'>
                xg<br /><br />hxh<br /><br />x<br /><br />f<br /><br />h
            </div>
            <div class="col2">
                jjh<br /><br /><br />ghjh<br />x<br /><br /><br /><br />g
            </div>
            <div class='col1'>
                kgkdfh
            </div>
        </div>

        <div id="footer">
            <p>This page  <a href="">Powered</a> by <a href="">dddddd</a></p>
        </div>
    </div>
</body>

和CSS：

 #container {
     width: 98%;
     margin: 0 auto;
 }
 #header {
     clear:both;
     width:100%;
 }
 .threecol {
     position: relative;
 }
 .col1 {
     left: 1%;
     position: absolute;
     width: 15%;
     background-color: #eee;
 }
 .col2 {
     background-color: white;
     left: 16%;
     width: 58%;
     position: relative;
 }
 .col3 {
     left: 74%;
     top :0;
     position: absolute;
     width: 24%;
 }
 #footer {
     margin: 0 auto;
     position: relative;
     bottom: 0;
     width:100%;
     border-top: 1px solid #000;
 }

我得到的是：

  1. 容器不在整页中，容器中有一些 div
  2. 页脚没有留在底部，他到了 divs。

我在定位和如何获得我想要的正确结果之间迷失了方向。我究竟做错了什么？

jsfiddle中的FOR演示

4

4 回答 4

1

我的一些建议，我将如何做到这一点。我不是给你代码，而是一些提示，可以让你立即做到这一点

  1. 摆脱 .css 中的所有位置属性
  2. 使用 float:left 将 div 放置在每个 athor 旁边

  3. 创建一个带有 class="clear" 的 div 并添加到您的 .css 代码

    div.clear {
    clear:both;
    边距：0；
    }

  4. 每次使用 float 属性时使用此 div

  5. 使用边距、填充、浮动

在我忘记之前，

body 在某些浏览器中具有标准填充。

body { 
 margin:0;
 padding:0;
 width:100%;
}

会处理的

于 2013-06-02T22:48:06.323 回答
1

1) Col2 样式应该是：

   .col2 {
    background-color: white;
    left: 16%;
    width: 58%;
    position: absolute;
    top: 0;
   }

将位置更改为绝对并添加顶部：0；宣言。

2）谷歌粘性页脚。这是非常复杂的。

于 2013-06-02T22:52:37.200 回答
0

（1 和 2 应该是单独的问题，但这里有）

1：

标签上的边距<ul>/<li>，可能还有标签上的边距，<body>将阻止您的容器成为整页。设置margin: 0;在<ul>and上<li>，你应该很高兴。如果您希望它有间距，请使用填充。

边距会将对象彼此推开，它们实际上并没有增加像素空间。因此，如果列表有左边距并且它在容器内，那么它将推动列表和容器远离页面边缘或容器外的其他 dom 节点。

容器外的 div 都是position: absolute. 当某个东西是绝对位置时，它不再属于父元素，它自己漂浮在页面的顶部，对页面的布局没有影响。如果您需要它在容器内，那么您不能将其设置为绝对位置。

2：

对于您使用相对位置的页脚，这意味着“将这个 x 像素从通常呈现的位置移开”，然后您有底部：0；这意味着相对于通常位置的位置向上零像素。

你可能想要position: fixed; bottom: 0;.

于 2013-06-02T22:42:11.180 回答
0

我对 JSfiddle 有点陌生，但这里是解决方案：

抱歉格式不好：

 .threecol {
          overflow: hidden;
          }
 .col1 {
        left: 1%;
        float: left;
        width: 15%;
        background-color: grey;
       }
  .col2 {
        background-color: white;
        width: 58%;
           float: left;

       }
  .col3 {
     float: left;


       width: 24%;
         background-color: grey;
       }
于 2013-06-02T23:12:09.180 回答