0

请多多包涵 - CSS 和 RWD 对我来说很新（一个 javascript、c++、python 人）。

我正在尝试将嵌套的 DVI 放在 RWD（响应式网页设计页面）上，以供朋友使用。

代码如下所示：

<div id="homewrapper" style="margin: 0 auto;">
<div class="section" id="homeleftcol" style="overflow: hidden; margin-left: 7px; margin-right: 7px; text-align: left; clear: left; float: left; cursor: pointer;">
    <a title="365x522" href="/a/"><img  style="padding: 0px;" alt="" src="black.png" width="356" height="522" /></a>
    <div class="hometitle" id="imgtitle">365x522</div>
</div>
<div id="homerightcol" style="clear: none; float: left;">
    <div class="section" style="margin-left: 7px; margin-right: 7px; margin-bottom: 0px; overflow: hidden; cursor: pointer;">
        <a title="365x254" href="/b/"><img  style="padding: 0px;" alt="" src="yellow.png" /></a>
        <div class="hometitle" id="imgtitle">365x254</div>
    </div>
    <div id="learncontact" style="overflow: hidden;">
        <div class="section" id="learn" style="margin-left: 7px; margin-right: 7px; overflow: hidden; float: left; cursor: pointer;">
            <a title="172x254" href="/c/"><img  style="padding: 0px;" alt="" src="blue.png" width="171" height="254" /></a>
            <div class="hometitle" id="imgtitle">172x254</div>
        </div>
        <div class="section" id="contact" style="margin-left: 7px; margin-right: 7px; overflow: hidden; float: left; cursor: pointer;">
            <a title="172x254" href="/d/"><img style="padding: 0px;" alt="" src="red.png" width="171" height="254" /></a>
            <div class="hometitle" id="imgtitle">172x254</div>
        </div>
    </div>
</div>

目前我有一个基本好的解决方案，但是当页面放大时，DIV 会拥抱左侧。

Wide: Hugs the margin-left:7px

主页 - 宽

这里有一些其他的视图（你可以看到它仍然在左边，但图像缩放以适应大部分。

普通的

狭窄的

非常窄

非常感谢您的帮助！非常感谢！！

4

1 回答 1

1

布局拥抱页面的右侧，因为您没有为“homewrapper”div 设置宽度值。问题如何在 div 中水平居中 div？更详细地介绍了这个问题。

这可以通过给它一个总宽度值来解决，如下所示：

<div id="homewrapper" style="width: 744px; margin: 0 auto;">

但是，您的代码还有其他一些问题。我不知道您是否已经意识到这一点，但是您说您是 CSS 新手，所以无论如何我都会包含它。

直接在 html 标签的 style 属性中编写所有样式被认为是非常糟糕的样式，并抵消了分离内容和表示的好处。您应该将其包含在单独的样式表中，并将其包含在 html 文档的标题中。w3schools将向您展示启蒙之路。

于 2013-08-02T06:07:09.590 回答