定位、边距、CSS答案

【问题标题】：Positioning, Margin, CSS定位、边距、CSS
【发布时间】：2013-10-17 01:50:40
【问题描述】：

我有两个用<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>

【问题讨论】：

你真的试过了吗？像jsfiddle.net 这样的网站非常适合这种事情。
您尝试的代码有问题吗？
我一直在使用w3schools.com/cssref/tryit.asp?filename=trycss_margin-left，但没有成功。我很好奇专业人士是如何做到的。
@showdev 我只是在使用记事本，然后在 Chrome 浏览器上刷新。什么都没有动。图像不动。我试图弄清楚如何使用 w3schools.com/cssref/tryit.asp?filename=trycss_margin-left 在不使用“float”的情况下定位它。似乎什么都没有动。我会试试这个 jsfiddle.net。
查看MDN's css guide。特别是关于“盒子”和“布局”。 W3Schools 还有一些不足之处......

标签： html css positioning margin

【解决方案1】：

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

#parent {
    position:relative;
}

并设置左右属性

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

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

【讨论】：

@lbu 我会试试看...是的，我确实用 id="box" 选择框 {position: relative;} 设置了包含 div 标签的父级，我认为这应该可行。
避免位置：如果您不确切知道如何使用它，则绝对
@www.innovacall.com 你好！我很好奇你避免绝对位置的原因是什么？谢谢。

【解决方案2】：

这是一种使用 CSS float 将图像定位到其父容器的左右两侧并在它们之间放置一些文本的方法：

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

【讨论】：

感谢它也有效。我在这个网站上的“定位”一章，而不是使用“浮动”。但这也有效。谢谢。
哦，好的。明白了。

【解决方案3】：

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

【讨论】：

我喜欢这种方法。谢谢。
虽然我喜欢 www.innovacall.com 的方法，但上面的方法对我来说可能更简单:)