Question

您好我在定位多张图片时遇到了问题。非常重要的是，站点的最大高度保持在大约580像素，因为我想给出在站点周围的相框的印象。我附上了一张图片，以显示网站的布局，以及我想在顶部，中间和底部div中放置图像的位置。我不想将它们作为背景图像，因为我希望有一些链接，我希望有一些jquery动画（即fadeIn和toggle）与其他图像。这是一个流畅的布局，但是当浏览器处于最小宽度780px时，我不希望垂直宽度扩展，我也希望图像是页面上的一些图像。

我仍然在学习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>

Answer 1

将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 */
}

Answer 2

尝试将clear: both;添加到.footer的CSS中。这将迫使它到“画框”的底部。

在页面周围的不同位置定位多个图像

2 个答案: