ページのさまざまな場所に複数の画像を配置する

こんにちは私はいくつかの画像を配置する際に問題があります。サイトの周りの写真フレームの印象を与えたいので、サイトの最大高さを約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

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

出典

2011-11-08 14:31:11 ScottS

ページのさまざまな場所に複数の画像を配置する

答えて

関連する問題