html+css布局问题(定位项)
Posted
技术标签:
【中文标题】html+css布局问题(定位项)【英文标题】:Problems with html+css layout (positioning items) 【发布时间】:2020-06-29 23:24:22 【问题描述】:我有这个代码:
我的小提琴:https://jsfiddle.net/v5j3L6e9/
基本上,我有 6 个框(带有图像和文本的 Div)。
我正在尝试将“底部区域”居中(例如,这可能是一个液体布局,顶部区域作为标题,然后是主要内容,具有最大宽度)
这个想法是“底部区域”具有固定的最大宽度,因此当分辨率较大时,它应该保持居中(同时“顶部区域”将随着分辨率宽度而扩大)。
我不明白如何在不破坏盒子定位的情况下使底部区域居中(盒子必须保持分布并保持居中)。
另外,不确定我是否做了一个好的元素层次结构(在 html+css 上相当新)。
谢谢。
.topzone
height: 100px;
background-color: blue;
.topzone h1
text-align: center;
.bottomzone
margin-top: 50px;
max-width: 800px;
text-align: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
.bottomzone div
position: relative;
width: 30%;
margin: 0px 10px 0px 10px;
.bottomzone img
width: 100%;
.bottomzone div h3
position: absolute;
top: 20px;
width: 100%;
<div class="topzone">
<h1>Title 1</h1>
<h2>Title 2</h2>
</div>
<div class="bottomzone">
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" >
<h3>Box 1</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" >
<h3>Box 2</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" >
<h3>Box 3</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" >
<h3>Box 4</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" >
<h3>Box 5</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" >
<h3>Box 6</h3>
</div>
</div>
【问题讨论】:
【参考方案1】:如果你想使用 flex-box,你可以简单地使用包装元素 centering-wrapper
并设置 align-items: center
和 flex-direction: column
以水平居中项目。
.centering-wrapper
display: flex;
flex-direction: column;
align-items: center;
.topzone
height: 100px;
background-color: blue;
.topzone h1
text-align: center;
.bottomzone
margin-top: 50px;
max-width: 800px;
text-align: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
.bottomzone div
position: relative;
width: 30%;
margin: 0px 10px 0px 10px;
.bottomzone img
width: 100%;
.bottomzone div h3
position: absolute;
top: 20px;
width: 100%;
<div class="topzone">
<h1>Title 1</h1>
<h2>Title 2</h2>
</div>
<div class="centering-wrapper">
<div class="bottomzone">
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" >
<h3>Box 1</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" >
<h3>Box 2</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" >
<h3>Box 3</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" >
<h3>Box 4</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" >
<h3>Box 5</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" >
<h3>Box 6</h3>
</div>
</div>
</div>
【讨论】:
感谢您的回答。这方面的问题是,如果我在“bottomzone”之后添加第二个区域(例如,“bottomzone2”)......然后我把它放在列中。我不再工作了。示例:jsfiddle.net/fjbgoqr0/2 你需要把justify-content
改成align-items
,因为你使用的是flex-direction: column
【参考方案2】:
将这些 CSS 规则添加到 .bottomzone
选择器:
margin-left: auto;
margin-right: auto;
这可确保浏览器计算出相同数量的空间用于左右边距。由于您在代码中使用了margin-top
,您可以像这样简化它:
.bottomzone
margin: 50px auto 0;
...
其中 0 代表下边距。
【讨论】:
以上是关于html+css布局问题(定位项)的主要内容,如果未能解决你的问题,请参考以下文章