Question

我有2个盒子应该出现在彼此旁边。我希望有一个垂直固定位置。所以当我向上或向下滚动时，盒子保持在同一高度。

但我不希望它是水平固定的，因为我希望两个盒子总是在一起。即使您使浏览器变大或变小。为此，我使用保证金：20px auto;

有没有办法 如何保留边距并获得2个框，其中1个框具有垂直固定位置。

就像这个网站发帖一样。有一个带有问题的主页面和一个带有类似问题的侧箱，始终保留在屏幕上。

到目前为止我的代码：

<!DOCTYPE html>
<html>

<head>
    <link rel="icon" type="image/png" href="/favicon.ico">
    <style>
        html,
        body {
            background-color: #026642;
        }
        #container {
            width: 800px;
            margin: 20px auto;
            position: relative;
        }
        #sidebox {
            background-color: white;
            padding: 5px;
            margin: 5px;
            border-radius: 5px;
            width: 180px;
            position: absolute;
        }
        #indexcontainer {
            padding: 10px;
            background-color: #FFD302;
            border-radius: 20px;
            width: 580px;
            position: absolute;
        }
        #header {
            text-align: center;
        }
        #content {
            background-color: white;
            padding: 5px;
            margin: 5px;
            border-radius: 5px;
        }
        #content i {
            font-size: 14px;
        }
        #footer {
            clear: both;
            padding: 0 5px;
            font-size: 11px;
            clear: both;
        }
        a:link {
            text-decoration: none;
            color: black;
        }
        a:visited {
            text-decoration: none;
            color: black;
        }
        a:hover {
            text-decoration: underline;
            color: black;
        }
        a:active {
            text-decoration: underline;
            color: black;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="sidebox">
            Sidebox
        </div>
        <div id="indexcontainer">
            <div id="header">
                <img src="images/emte.jpg" alt="logo" width="200" height="100">
                </a>
            </div>
            <div id='content'>
                Main text box
            </div>
            <div id="footer"></div>
        </div>
    </div>
</body>

</html>

需要如何运作：

Answer 1

<html>
<head>
<script type="text/css">
#sidebox{
 margin:left;
 position:fixed;
}
</script>
</head>
<body>

<div id="sidebox">
    Sidebox
</div>
<p>
other data to display......
</p>
</body>

希望这会有所帮助

你也可以看到这个JsFiddle链接http://jsfiddle.net/Dn3UH/

Answer 2

#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 40%;
position: relative;
margin: 0 auto;

}

#container {
width: 100%;
margin: 20px auto;
position: relative;

}

Answer 3

使用这个CSS ...

    body {
        background-color: #026642;

    }
    #container {
        width: 100%;


   }
   #container #indexcontainer{

   margin-left:23%;
   width:30%;


  }
  #container #indexcontainer #header #sidebox {
        background-color: white;
        color:red;
        padding: 5px;
        margin-left:31%;
        border-radius: 5px;
        width: 20%;
        position: fixed;
  }
  #indexcontainer {
        padding: 10px;
        background-color: #FFD302;
        border-radius: 20px;
        width: 580px;
        position:relative;

    }
    #header {
        text-align: center;
    }
    #content {
        background-color: white;
        padding: 5px;
        margin: 5px;
        border-radius: 5px;
    }
    #content i {

        font-size: 14px;
    }
    #footer {
        clear: both;
        padding: 0 5px;
        font-size: 11px;
        clear: both;
    }
    a:link {
        text-decoration: none;
        color: black;
    }
    a:visited {
        text-decoration: none;
        color: black;
    }
    a:hover {
        text-decoration: underline;
        color: black;
    }
    a:active {
        text-decoration: underline;
        color: black;
    }

进一步查看此jsfiddle链接http://jsfiddle.net/NJMK6/4/

希望这能帮到你...谢谢

CSS浮动和定位

3 个答案: