gpt4 book ai didi

html - 当页面宽度较低时,将两列(div)彼此对齐

转载 作者:行者123 更新时间:2023-11-28 10:53:38 30 4
gpt4 key购买 nike

这是我的 jsfiddle 代码如果您向上更改水平大小,则 div(第 1 节和第 2 节)水平居中。但是如果宽度很低,第 2 部分会在第 1 部分下面。问题是如何将它们居中?我尝试了很多 wrapper 的可能性,但没有结果。你能帮帮我吗?

最佳答案

嗯,我想我明白你的意思了。好吧,因为 #section_first 的宽度是固定的和 #section_second ,我认为这仍然可以通过(大部分)媒体查询来完成。不过,在给出修复之前,需要更改几件事:

首先,删除display:inline-block根据您对 #main 的定义,否则将 #main 的子项居中会有问题之后。此外,删除 display:inline来自 #section_first#section_second ,因为该样式已完全被您应用于它们的 float 覆盖,并且它们只会在以后引起问题。

现在,稍微重新排列您的 HTML,以便 #clearer允许 #main缩放到其内容的大小(基本上,将 #clearer 移动到 #main 中):

<div id="page_content">
<div id="main">
<div id="section_first">Section 1</div>
<div id="section_second">Section 2</div>
</div>
<div id="clearer"></div>
</div>

此时,布局中实际上应该没有任何改变 - 所以现在让我们添加一些媒体查询响应:

@media (max-width:478px) {
div#section_first {
margin:0 auto;
float:none;
}
div#section_second {
margin:0 auto;
float:none;
}
}

478px 的最大宽度是从#main 开始计算的宽度为 90%,其内容的组合宽度为 200px + 200px + 30px(边距)= 430px。并且 430px/0.9 = 477.777px,我们可以四舍五入到 478px,以便在出现不需要的显示问题之前使用替代样式。媒体查询中的样式停止了子项的 float ,并以常见的 margin:0 auto 居中。 .

这是一个 updated JSFiddle演示修改后的代码。请注意,我还删除了 <html> 上的默认边距。和 <body>使用 CSS。如果您有任何问题,请告诉我!

关于html - 当页面宽度较低时,将两列(div)彼此对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22692436/

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