不想文本居中 [英] Do not want the text to be centered

问题描述

我以前从未编程过任何东西，但是我有一个大学项目需要编辑布局。
有一部分内容位于文本的中心，当到达页面中心时，它会跳到下一行。.我希望它继续正常运行。.
https://jsfiddle.net/nqpa6jh0/#&togetherjs=vORwosTiHV

i've never programmed before or anything, but i have a college project in which i have to edit a layout. there's a part of it in which the text is kinda in center, when it reaches the center of the page it skippes to next line.. i want it to continue normally.. 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>

这是

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

that's how i wanted it to look like (photoshopped the first one):

推荐答案

让我解释一下

从photoshopped图片中，我可以看到您要实现的目标以及代码中的错误。其中有很多。

From the photoshopped image, I can see what you are trying to achieve as well as the errors in your code. There are plenty of them.

此处：（冗余代码）

.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看起来像这样：

You are not using classes properly. Classes are meant to remove the redundant code in css. Lets consider you added a class myParentClass to the div containing the sections as well remove the class image feature2 on a element. Then the html would look like:

<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可以替换为：

The above css can be replaced with:

.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 。因此：

And in order to make the text inside the p elements not to wrap around, you need to add white-space": nowrap. So:

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

要使 odd 部分元素的左侧留有一定的空格，必须使用填充即

And to have the effect of having some whitespace to the left of odd section elements, you must use padding i.e,

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

这篇关于不想文本居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！