Question

好的，我有一个标题，一个导航栏和内容框（图1）：http://imgur.com/SLFdp85,MllQ1EL#0

（点击下一个/上一个以查看两张图片）

我想要两个侧边栏，一个在左边，有图片或者其他东西，另一个在右边有一个“关于我们”主题。

所以我添加了它们（图2）。

无论如何，现在，如果我调整浏览器窗口的大小，则两个侧边栏会与页面上的内容重叠;除了保持放置和不匹配以适应页面的宽度之外，就像我希望他们这样做。

...代码

CSS：

#leftSide
{
height: 700px;
width: 425px;
border-radius: 5px;
margin-left: 35px;
box-shadow: 0px 0px 22px #acacac;
position: relative;
float: left;
clear: left;
background-color: #FFF;
}

#rightSide
{

height: 700px;
width: 425px;
border-radius: 5px;
margin-right: 35px;
box-shadow: 0px 0px 22px #acacac;
position: relative;
float: right;
clear: right;
background-color: #FFF;
}

HTML：

<body>
<div class="wrapper">
    <div class="container">
        <div id="header">
            <a href="index.html"><h1>Heritage Bulk Organics</h1></a>
        </div>
    </div>

    <div id="navbar">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="product.html">Our Products</a></li>
            <li><a href="contact.html">Contact Us</a></li>              
        </ul>   
    </div>

    <div id="leftSide">

    </div>

    <div id="rightSide">

    </div>

    <div class="paragraphBody">
                    //CONTENT//

        </p>        
    </div>
</div>
</body>

Answer 1

这很容易解决。你只需要把所有东西都装在一个容器里。

如果您希望侧边栏始终保持原样，请靠近内容，然后为容器提供固定宽度。这将引入一个水平滚动条，但这比重叠更好。

如果您希望侧边栏保持在屏幕边缘旁边，但不重叠，则使用最小宽度。这将使它们保持在屏幕边缘旁边，只要屏幕足够大，并且它应该变小，然后再次变为水平滚动条场景，这再次优于重叠。

<div id="containAll">
<!-- All your other code here -->
</div>

#containAll {width:###px;}
/* OR */
#containAll {min-width:###px;}

调整窗口大小时如何使浮动不移动

1 个答案: