请耐心等待我 - 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
以下是一些其他观点(你可以看到它仍然在左边拥抱,但图像缩放以适应大部分。
非常感谢 赞赏你的帮助!非常感谢你!!
答案 0 :(得分:1)
布局拥抱页面的右侧,因为您没有为&#34; homewrapper&#34;设置宽度值。 DIV。问题How to center a div in a div - horizontally?更详细地介绍了这个问题。
这可以通过给它一个像这样的总宽度值来修复:
<div id="homewrapper" style="width: 744px; margin: 0 auto;">
但是您的代码还存在其他一些问题。我不知道你是否已经意识到这一点,但是你说你是CSS的新手,所以无论如何我都会把它包括在内。
直接在html标签的style属性中编写所有样式被认为是非常糟糕的样式,并抵消了分离内容和表示的好处。您应该将其包含在单独的样式表中,并将其包含在html文档的标题中。 w3schools会告诉你通往启蒙的道路。