gpt4 book ai didi

css - 读取 : Center nested DIVs

转载 作者:太空宇宙 更新时间:2023-11-04 14:44:28 24 4
gpt4 key购买 nike

请耐心等待 - CSS 和 RWD 对我来说还很陌生(我是 javascript、c++、python 的人)。

我正在尝试将嵌套的 DVI 置于 friend 的 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

Home - Wide

这里有一些其他 View (您可以看到它仍然紧靠左侧,但图像缩放以适合大部分。

Normal

Narrow

VeryNarrow

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

最佳答案

由于您没有为“homewrapper”div 设置宽度值,因此布局占据了页面的右侧。问题How to center a div in a div - horizontally?更详细地介绍了这个问题。

这可以通过像这样给它一个总宽度值来解决:

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

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

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

关于css - 读取 : Center nested DIVs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18006162/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com