html - ポジショニング、マージン、CSS

Question

で囲まれ<div>た 2 つの画像がありますが、セレクター id="image" を作成したいと考えています。しかし、ページの流れから外れた最初の画像を、その左余白が親要素の左余白と同じ高さになるように配置したいと思います。2番目の画像では、右マージンを親要素の左マージンと同じ位置に配置したいと思います。助言がありますか？

Before:
 _
| |
|_| 

 _
| |
|_| 

Hello world



After:

 _                   _
| |   Hello world   | |
|_|                 |_|

私のCSSは次のようになるべきだと考えています：

#image-left img {
position: absolute;
margin-left: 0;
}
#image-right img {
position: absolute;
margin-right: 0;
}

私のHTMLは：

<div id="image-left"><img src="image/logo.jpg"></div>
<div id="image-right"><img src="image/logo.jpg"></div>

Answer 1

親の位置プロパティも設定する必要があります。

#parent {
    position:relative;
}

left および right プロパティを設定します

#image-left img {
    position: absolute;
    left: 0;
}
#image-right img {
    position: absolute;
    right: 0;
}

真ん中にあるテキストは、フローティング画像と重ならないように、左右にマージンが必要です。

Answer 2

<div class="container">
    <div class="image-left"><img src="image/logo.jpg"></div>
    <div class="TextContent">Hello world</div>
    <div class="image-right"><img src="image/logo.jpg"></div>
</div>

.container div {
    float:left;
}

.container div img {
    display:box;
}

.container div.TextContent {
    margin-right:10px;
    margin-left:10px;
}

http://jsfiddle.net/u3JMz/