CSS浮动和定位答案

【问题标题】：CSS floating and positioningCSS浮动和定位
【发布时间】：2014-02-20 23:20:05
【问题描述】：

我有 2 个盒子应该并排显示。我想要一个垂直固定的位置。因此，当我向上或向下滚动时，框保持在相同的高度。

但我不希望它是水平固定的，因为我希望 2 个框始终位于中心。即使您使浏览器变大或变小。为此，我使用 margin: 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>

它需要如何工作：

【问题讨论】：

标签： css position margin floating

【解决方案1】：

使用这个 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/

希望对您有所帮助...谢谢

【讨论】：

您使用以 px 和 % 为单位的宽度。真的不明白。在 jsfiddle 上，它就像我想要的那样工作，但宽度现在是 %，我希望它始终相同。无法确定将 % 更改为 px 的位置，因为有时您会多次使用 div，例如 #indexcontainer。
好的，那么你只需要根据你的div位置放置px....看看这个jsfiddle.net/NJMK6/5
我会尝试，但有一件事情让我很困扰。首先你说#container{width: 100%} 然后你把它设置为30%？之后您甚至将其设置为 20%？或者我不懂 CSS 或你的编码，对不起。

【解决方案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;

}

【讨论】：

【解决方案3】：

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

【讨论】：

这似乎对我不起作用。当我向上和向下滚动时，侧边框是固定的并且始终保持在同一位置，并且 margin: auto 也仍然有效。但盒子在 indexcontainer 里面。当我向左（或向右）时，我可以解决这个问题，但盒子总是保持在左边或右边，然后你不能调整浏览器的大小，否则盒子会相互折叠。网址是：h5frank.gomarjd1.one.axc.nl/winkel.php
这仍然不是我想要的，对不起！我希望sidebox和indexcontainer为1，然后通过margin auto将其居中。就像现在一样。但是当你去使用定位时，它就不再起作用了。也许没有解决办法？
请使用任何显示您想要获得的工作场景的图像更新您的问题...这将使我轻松解决您的问题...谢谢。