Question

我正在创建一个具有两列布局的基本投资组合网站。左栏包含导航，右栏显示内容。

这是我拥有的HTML和CSS：

HTML

<div id="container">
    <div id="nav">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="about.jsp">About</a></li>
          <li><a href="portfolio.jsp">Portfolio</a></li>
          <li><a href="contact.jsp">Contact</a></li>
        </ul>
    </div>
    <div id="content">
        <p>Some content</p>
    </div>
</div>

CSS

html, body {
    height: 100%;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
#container {
    max-width: 900px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
#nav {
    width: 20%;
    height: 100%;
    float: left;
    background-color: #FFAD73;
    top: 0;
    left: 0;
}

#content {
    width: 80%;
    height: auto;
    float: left;
    top: 0;
    right: 0;
    background-color: #73C5FF;
}

li { list-style: none;
}

JSFiddle：http://jsfiddle.net/rcode74/m8w4yj8o/

我目前的HTML / CSS的主要问题是，如果浏览器太窄，导航列会与内容列重叠。我尝试为导航div设置min-width但是当浏览器缩小时，导致将内容列移动到导航列下方。

Answer 1

您需要为#container设置最小宽度。它看起来像是重叠的原因，因为它试图保持列的20-80没有任何最小宽度限制。由于左列中有内容，因此它看起来像是重叠的。

请在此处查看：http://jsfiddle.net/obna91x1/1/

#container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    min-width: 500px;
}

在双列div布局右列覆盖左列

1 个答案: