将图像浮动到文本右侧时图像和文本之间的间隙

Question

使用 float 属性，第二个图像(在开发部分旁边)与文本之间有很大的间隙。我需要它与第一张图像具有相同的间距(在设计部分旁边).development类用于第二张图像。skills-row类是div。

.design {
width: 100px;
height: 100px;
float: left;
padding-right: 30px;
}
.development {
width: 100px;
height: 100px;
float: right;
margin-left: 0
}
.skill-row {
width: 50%;
margin: 100px auto 100px auto;
text-align: left;
display: inline-block;
}

<hr>
<div class="skills">
<h2>My Skills.</h2>
<div class="skill-row">
<img class="design pic" src="http://lorempixel.com/100/100/" alt="editor image">
<h3 class="design-header">Design</h3>
<p>Focusing on the design and message you want to convey.</p>
</div>
<div class="skill-row">
<img class="development pic" src="http://lorempixel.com/100/100/" alt="earth leaf image">
<h3>Development</h3>
<p>Develop that initial idea so that we create a website that runs across multiple devices.</p>
</div>
</div>

我期望第二张图像与文本的距离与第一张图像的距离相同。但是第一张图片和文本之间的差距要大得多。

Answer 1

问题可能是很多事情。将来，如果您发布https://codepen.io/pen/，这个问题会更容易回答。不过一些一般提示：

1. 如果您想要相同的外观，请使用相同的类。你有：

class="design pic"class="development pic"

这些有不同的样式，所以你会得到不同的结果。 一个有padding-right: 30px;，另一个有margin-left: 0.创建一个类，并将它们分配给两个类，您将获得相同的设计。

同样，您正在浮动这些图像。这意味着图像将"浮动"到div的左侧或右侧。也许空间实际上是由于文本很短，并且您的图像浮动。

2. 你似乎有多余的类。为什么他们都有类pic，但你的样式表中没有.pic？这应该是您用于两者并为其分配相同样式的类。

3. 您有一个长度不变的文本。如果您希望图像的功能相同，我建议您还要求文本具有类似的约束。

我希望这有帮助！

更新 还有其他方法可以左右获取图像。例如 - 将img移动到h3之后，p右侧的所需位置。