gpt4 book ai didi

css - 在页面周围的不同位置放置多个图像

转载 作者:太空宇宙 更新时间:2023-11-04 16:12:47 25 4
gpt4 key购买 nike

您好,我在定位多张图片时遇到问题。网站的最大高度保持在大约 580 像素非常重要,因为我想在网站周围给人一种相框的印象。我附上了一张图片来显示网站的布局以及我想在顶部、中间和底部 div 中放置图像的位置。我不想将它们作为背景图像,因为我想将一些作为链接,并且我希望与其他图像一起使用一些 jquery 动画(即淡入和切换)。这是一个流畅的布局,但我不希望当浏览器处于 780 像素的最小宽度时垂直宽度会扩展,我还希望图像位于页面的中心位置。

我还在学习 CSS,所以我已经尽力了,但它仍然不合适。

谢谢你的帮助

网站布局图 Site Layout Picture

.container {
width: 100%;
max-width: 1096px;
min-width: 780px;
margin: 0 auto;}

.header {
background:#231f20;
height: 65px;
}

.sidebar1 {
padding: 0px;
float: left;
width: 65px;
background: #231f20;
margin: 0;
min-height: 450px;}

.sidebar2 {
float: right;
width: 65px;
background:#231f20;
margin: 0;
min-height: 450px;}

.main_content{
padding: 0px;
width: 80%;
float: left;
}

.footer {
height: 65px;
background:#231f20;
position: relative;
}

HTML

<body>
<div class="container">
<div class="header"></div>

<div class="sidebar1"></div>

<div class="main_content">
<div class="top"></div>
<div class=”middle"></div>
<div class=”bottom"></div>
</div>
<div class="sidebar2"></div>
</div>
</body>

最佳答案

position: relative 添加到所有包含的 div(您可能还必须将它们的 height 设置为最高图像的高度)。然后将所有图像定位为:

.img1 { /* or whatever class name works for you */
position: absolute;
left: 50%; /* this centers it, if you want thirds, us 33%, 66%, etc. */
margin-right: -50px; /* note: 50px is an example, it needs to be half the width of your image width */
}

关于css - 在页面周围的不同位置放置多个图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8051663/

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