不希望文本居中

Question

我以前从未编程过，但我有一个大学项目，我必须在其中编辑布局。 其中有一部分文本在中心，当它到达页面的中心时，它会跳到下一行..我希望它能够正常继续.. https://jsfiddle.net/nqpa6jh0/#&togetherjs=vORwosTiHV

.image.feature2 {
  display: block;
  margin: 0 0 0em 0;
}

.image.feature2 img {
  display: block;
  width: 100%;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  float: left
}

.image.feature3 img {
  display: block;
  width: 100%;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  float: right;

<div class="wrapper style2">
  <section class="container">
    <header class="major">
      <h2>Depoimentos</h2>
      <span class="byline">Os viajantes recomendam.</span>
    </header>
    <div class="row no-collapse-1">
      <section class="">
        <a class="image feature2"><img src="images/pic02.jpg" alt=""></a>
        <p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
      </section>
    </div>
  </section>
</div>

这是它的外观

这就是我想要的样子（第一个照片）：

Answer 1

让我给你解释清楚。

从经过 photoshop 处理的图像中，我可以看到您想要实现的目标以及代码中的错误。有很多。

这里：（冗余代码）

.image.feature2 img {
  display: block;
  width: 100%;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  float: left
}

.image.feature3 img {
  display: block;
  width: 100%;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  float: right;
}

您没有正确使用类。类旨在删除 css 中的冗余代码。让我们考虑您在包含这些部分的 div 中添加了一个类 myParentClass，并删除了 a 元素上的类 image feature2。然后html看起来像：

<div class="myParentClass row no-collapse-1">
  <section class="">
    <a ><img src="images/pic02.jpg" alt=""></a>
    <p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
  </section>
  <section class="">
    <a><img src="images/pic02.jpg" alt=""></a>
    <p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
  </section>
</div>

上面的css可以换成：

.myClass section a img {
  display: block;
  width: 100%;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  float: left
}

.myParentClass section:nth-child(odd) a img {
  float: right;
}

为了使p 元素内的文本不被环绕，您需要添加white-space": nowrap。所以：

.myParentClass section p {
  white-space: nowrap;
}

为了使odd 部分元素的左侧有一些空格，您必须使用padding，即

.myParentClass section:nth-child(odd){
  padding-left: 50px;
}