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/，此问题将更容易回答。但是，一些一般性提示：

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

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

它们具有不同的样式，因此您将获得不同的结果。一个拥有padding-right: 30px;，另一个拥有margin-left: 0。制作一个班级，并为他们分配该班级，您将获得相同的设计。

同样，您正在浮动这些图像。这意味着图像将在div的左侧或右侧“浮动”。可能实际上是由于文本短而造成的，并且图像浮动。

您似乎有多余的类。为什么它们都具有类pic，但是样式表中没有.pic？这应该是您用于两者的类，并为它们分配相同的样式。
您的文本长度不变。如果要使图像功能相同，建议您也要求文本具有类似的约束。

我希望这会有所帮助！

更新还有其他方法可以左右获得图像。例如，将img移到h3和p的右侧。

将图像浮动到文本右侧时，图像和文本之间存在间隙

1 个答案: