-3

ページの中央に3つの画像を配置するのに問題があります。

画像＃1の高さが約500ピクセル、幅が500ピクセルだとします。画像＃2と＃3は、高さ250ピクセル、幅500倍です。画像＃1を左側に、画像＃2と＃3を画像＃1の隣に配置したいと思います。それらが互いに正しく隣接しないように、それらの間にいくらかのマージンがありますが、今のところ、それらを整列させる方法を理解する必要があります。

------------------    -------------------
|                 |   |                 |
|                 |   |                 |
|                 |   |                 |
|                 |   |_________________|
|                 |   
|                 |   |-----------------|
|                 |   |                 |
|                 |   |                 |
-------------------   -------------------

それは理にかなっていますか...？

また、ボタンなどではありません。画像を計画するだけです。

4

3 に答える 3

2

このような？http://jsfiddle.net/chmHH/

Chrome で動作しますが、他のブラウザはチェックしていません。

HTML (クラス名を使用することをお勧めします)

<div>
    <img src="http://placekitten.com/200/200"/>
    <img src="http://placekitten.com/150/200"/>
    <img src="http://placekitten.com/150/200"/>
</div>​

CSS

div{
    text-align:center;
}
img{
    display:inline;
}

更新: http://jsfiddle.net/chmHH/1/

HTML

<div>
    <img src="http://placekitten.com/200/200"/>
    <img src="http://placekitten.com/200/98" class="top"/>
    <img src="http://placekitten.com/200/98" class="bottom"/>
</div>​

CSS

div{
    text-align:center;
}
img{
    display:inline;
}
img.top{
    vertical-align:top;
}
img.bottom{
    vertical-align:baseline;
    margin-left:-204px;
}
​
​
于 2012-11-30T23:59:02.783 に答える
1

最初のアプローチ。

マークアップを少し変更できる場合、最も簡単な方法は、列にレンダリングする必要がある画像用のボックスを追加することです。次にdisplay、新しい行で開始しないようにボックス プロパティを変更します。

.inline-block {
  display: inline-block;
}
.small {
  display: block;
}
<img src="https://picsum.photos/100/100/"/>
<div class="inline-block">
  <img class="small" src="https://picsum.photos/100/50/"/>
  <img class="small" src="https://picsum.photos/100/50/"/>  
</div>

2 番目のアプローチ。

CSSfloatプロパティを使用します。float について知りたいと思うことはすべて、この css-tricks の投稿にあります。

そして、それが最終結果です。

#big {
    float:left;
    margin-right:2px;
}
.small {
  display: block;
}
<img id="big" src="https://picsum.photos/100/100/"/>
<img class="small" src="https://picsum.photos/100/50/"/>
<img class="small" src="https://picsum.photos/100/50/"/>

于 2012-12-01T00:04:34.903 に答える
-3

画像が 3 つしかなく、html を使用している場合は、次のように左、中央、右を揃えてみてください。

<img src="whatever you want" align=left height="whatever" width="whatever">
<img src="whatever you want" align=right height="whatever" width="whatever">
<img src="whatever you want" position:absolute; left:"whatever%"; top:"whatever%; height:"whatever px"; width:"whatever px";>

また、画面の解像度に応じて、幅と高さを十分に小さいサイズに設定して、すべてがスペースに収まるようにする必要があります。画像サイズを小さなサイズに縮小してみてください。おそらくうまくいくでしょう。

于 2012-12-01T00:06:54.343 に答える