페이지 주위의 여러 위치에 여러 이미지 위치 지정

안녕하세요. 여러 이미지 배치에 문제가 있습니다. 사이트 주위에 그림 프레임의 느낌을주고 싶기 때문에 사이트의 최대 높이가 약 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>

출처

2011-11-08 MrThunder

문제점을 설명해 주시겠습니까? 내가 보는 모든 것은 사이트의 이미지입니다. – Blender

시도 .footer에 대한 CSS에 clear: both;를 추가. 이렇게하면 "사진 액자"의 아래쪽으로 이동합니다.

출처

2011-11-08 14:19:12 Blazemonger

포함 된 모든 div에 position: relative을 추가하십시오 (이 중 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 */ 
}

출처

2011-11-08 14:31:11 ScottS

페이지 주위의 여러 위치에 여러 이미지 위치 지정

답변

관련 문제