5

私のウェブページには 2 つの画像が掲載されています。1 つの画像を左に配置し、もう 1 つの画像を分割の右端に配置します。

Jsフィドル

ここに私のHTMLがあります:

<div class="header">
<img id ="ttl" src="Home_files/images/ttl.png">
<img id ="se" src="Home_files/images/se.png">
</div>

およびCSS: 

.header {
position: relative;
top: 0%;
height: 20%;
}
/*Header CSS*/
img#ttl {
position: relative;
top:50%;
height: 50%;
left: 0px;
}
img#se {
position: relative;
top:60%;
height:30%;
vertical-align:right;
margin-right: 2%;
}

PS: 試してみfloat:right;ました。Chrome と FF では機能しますが、IE では機能しません。もちろん、この div には親 div があります。しかし、それが問題になるとは思いません。

4

3 に答える 3

9

画像を相対位置コンテナ内にラップし、使用position: absolute;して左下と右下に配置できます

デモ

<div class="wrap">
    <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
    <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>

div.wrap {
    width: 600px;
    border: 1px solid #f00;
    height: 300px;
    position: relative;
}

.wrap img {
    border: 1px solid blue;
     position: absolute;
    bottom: 0;
}

.wrap img:nth-of-type(1) {
    left: 0;
}

.wrap img:nth-of-type(2) {
    right: 0;
}

注:nth-of-type画像を選択するために使用しているため、画像ごとにクラスを宣言する必要がありません。古いブラウザーをサポートする場合は、画像ごとにクラスを追加:nth-of-typeし、それらのクラスに置き換える必要があります。

于 2013-05-17T07:51:31.817 に答える
2

これを試して

<div class="header">
    <div class="left"><img id ="ttl" src="Home_files/images/ttl.png"></div>
    <div class="right"><img id ="se" src="Home_files/images/se.png"><div>
</div>

CSS

.left{
  float:left;
}
.right{
    float:right;
}

デモ

于 2013-05-17T07:45:19.800 に答える