Question

编辑：最大宽度：760px修复了我的缩放问题！感谢那！但是一个新的问题出现了，现在我的导航，在小窗口缩放......我希望它是一个固定的大小。

嘿伙计们，所以我正在我的html课程中学习自适应设计，我们必须建立一个大型布局，中等布局和小布局的网站。大的很容易，也有介质，但是对于小的布局，因为窗口很小，我试图让单词换行，所以你必须向下滚动，文本适合窗口。我不能为我的生活弄清楚如何做到这一点。

我有一个有效的参考，我甚至直接复制+粘贴代码，但仍然无效。这是所有的身体，文章和需要包装的东西。这让我疯了。 CSS验证器说没有错误，所以我只是困惑。

我发现的导航是完美的，只是促销课中的东西给我带来了麻烦。

这是我的CSS代码：

header a.logo {
    width: 105px; height: 40px;
    top: 16px; right: 15px;
    background-image: url(../images/logo_small.png);
    }

article { padding: 20px 20px 10px 20px;
        margin-top:-400px;
        word-wrap:break-word;
        }

nav {
    display: block;
    position: static;
    padding: 10px 0px 10px 0px;
    background-color: #000000;
}

nav a {
    color: #FFFFFF;
    display: block;
    margin: 15px;
    padding: 9px;
    border: 1px solid #FFFFFF;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

nav a:hover { color: #ED1C24; background-color:#fff; }

.promo_container {padding: 0px;}

.promo_container .promo {
    width: auto;
    float: none;
    padding: 10px 0px 0px 0px;
    background-position: 20px 13px;
    border-top: 1px solid #ccc;
}

.promo_container .promo .content { padding: 0px 20px 5px 90px; }


footer { border-top: 1px solid #a6abc5; }
article { padding: 20px 20px 10px 20px; }

body {background-image: none;}

.wrapper{width:760px;
        margin:auto;
        position:relative;
        background-color:#ffffff;
        padding-left:10px;
        padding-right:10px;
        border: 3px #000;
        -webkit-border-radius:20px; 
        -moz-border-radius:20px; 
        border-radius:20px; 
        }

.optcenter{background-image:none;)

HTML代码：

<div class="wrapper">

<article>
<center><h2>Welcome to Redline Performance</h2></center>
<p>Redline Performance Racing is your one stop shop for all things speed. We offer a full fledged racing school with the fastest cars, and visit the most famous race tracks. Experience a thrill ride like never before, only from Redline Performance Racing.</p>
</article>

<div class="promo_container">
    <div class="promo one">
        <div class="content">
            <h3>Speed</h3>
            <p>At Redline Performance Racing, we only offer the fastest cars,     capable of reaching the fastest speeds.</p>
            <p><a class="cta" href="cars_tracks.html">Visit our Cars</a></p>
        </div>
    </div>
    <div class="promo two">
        <div class="content">
            <h3>Safety</h3>
            <p>blah</p>
            <p><a class="cta" href="">Visit our blog</a></p>
        </div>
    </div>
    <div class="promo three">
        <div class="content">
            <h3>Thrills</h3>
            <p>Are you ready for the ultimate thrill ride?</p>
            <p><a class="cta" href="">Visit our blog</a></p>
        </div>
    </div>
    <div class="clear-fix"></div>
</div>
<footer>
<p>&copy; RedLine Performance Racing</p>
</footer>

我假设问题出现在CSS中？如果有人可以帮助那将是惊人的。谢谢！

Answer 1

类div的{{1}}的固定宽度为760px。这对响应式设计来说并不好。而不是那样，使用wrapper。这应该让你开始。

哦，还有，为什么你在文章样式中有max-width:760px？

CSS：调整窗口大小时自动换行？响应式设计

1 个答案: