0

我有两个图像被包围<div>但想创建一个选择器 id="image"。但我想定位从页面流中取出的第一张图像，其左边距与父元素的左边距齐平。在第二张图片上，我希望它的定位右边距与父元素的左边距齐平。有什么建议么？

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>
4

3 回答 3

3

您还必须设置父位置属性：

#parent {
    position:relative;
}

并设置左右属性

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

请注意，中间的任何文本都必须在左右两侧留有一些边距，以免与浮动图像重叠

于 2013-10-16T17:38:09.803 回答
2

这是一种使用 CSSfloat将图像定位到其父容器的左侧和右侧的方法，它们之间有一些文本：

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

div#container {
    width:50%;
    border:1px solid #000;
    text-align:center;
}

#image-left {
    float:left;
}
#image-right {
    float:right;
}

http://jsfiddle.net/JJEng/

编辑：

简化：

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

div#container {
    width:50%;
    border:1px solid #000;
    text-align:center;
}

img#image-left {
    float:left;
}
img#image-right {
    float:right;
}

http://jsfiddle.net/JJEng/1/

于 2013-10-16T17:42:39.990 回答
1 
<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/

于 2013-10-16T17:50:40.523 回答