html - 当我缩小浏览器时，如何避免我的 "website"崩溃？

Question

我不熟悉使用 div 元素。问题是我在本主题的标题中提到的问题。这是我的代码，我浏览了一些在 stackoverflow 上创建的主题，但我还没有找到解决这个问题的好方法。这是我的代码:

http://jsfiddle.net/rwt3V/

我的 HTML

<div class="container">
    <div class="navigation">
        <ul>
            <li><a href="index.php">Main</a>

            </li>
            <li><a href="about.php">About</a>

            </li>
            <li><a href="smth.php">Something</a>

            </li>
        </ul>
    </div>
    <div class="content">A LOT OF TEXT</div>
    <div class="clear"></div>
</div>

我的 CSS

body{
    width: 1024px;
    margin: auto;
}

.container{
    background-color: #160b9c;
    margin: auto;
    color: white;
}

.navigation{
    float: left;
    width: 307px;
    border: 1px solid white;
}

.navigation ul{

}

.navigation li{
    list-style-type: none;
    border: 1px solid #fff;
}

.navigation li a{
    text-decoration: none;
    color: #fff;
}

.content{
    float: right;
    width: 715px;
}

.clear{
    clear: both;
}

Answer 1

到目前为止，我没有在 Safari 中看到问题，这实际上是一件好事。我可以向您展示一种更好的方法来将所有内容都放在一行中，那就是 JsFiddle .让我们再分解一下。如果我们正在查看这个特定的 CSS 元素:

.container {
    background-color: #160b9c;
    margin: auto;
    color: white;
}

我们注意到它并没有以任何特殊的顺序或方式将 div 保存在其中。这就是我们重组并添加显示元素的原因:

.container {
    background-color: #160b9c;
    margin: auto;
    color: white;
    display: inline-block;
}

这应该可以解决您的问题。但是，如果这仍然对您不起作用，您的问题之前已经被问过并且它实际上位于 here最佳答案很好地解释了一些事情。

我想留给您的另一件事是 Almanac .这可以帮助您解决任何问题，或者希望可以帮助您解决 CSS 遇到的任何问题。我还建议确保一切都是……最新的。所以换句话说，试着找到最好的屏幕尺寸和这个 website可以帮助您找到它。

总的来说，祝你 future 的编码好运，你明白了:)