Question

我希望将段落文本放置在图像的右侧，就像在此模型中一样： https://imgur.com/a/ArDIEqH

我通过将父级的显示设置为flex来对齐文本，现在看起来像这样： https://imgur.com/a/wECtedW

文本在每个单词上都换行了，如何使它看起来像样机？

.zodiac-info {
  width: 500px;
}

.blog-entry-name {
  padding: 0px;
}

.zodiac-paragraph {
 color: black;
 width: 200px;
}

.blog-entry-container {
  margin-top: 100px;
  margin-left: 250px;
}

.blog-entry {
  display: flex;
}
```

<section class="zodiac-info">
    <div class="blog-entry-container">
    <input  type="search" class="search-box fa fa-search" placeholder="  &#xf002 search">
    <div class="blog-entry">
      <img src="../assets/images/test-image.jpg" alt="test image" class="test-img">
      <p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <div class="blog-entry">
        <img src="../assets/images/test-image.jpg" alt="test image" class="test-img">
        <p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
      <div class="blog-entry">
          <img src="../assets/images/test-image.jpg" alt="test image" class="test-img">
          <p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
  </section>

Answer 1

使用float: left和float: right完全移动文本和图像。

Answer 2

我只需很少的CSS更改即可更新您的代码。试试这个，希望对您有所帮助。谢谢

.zodiac-info {
  margin: 100px auto 0;
  padding: 0 20px;
}

.blog-entry {
  display: flex;
  margin-top: 20px;
}

.blog-entry img {
  flex-shrink: 0;
  height: 120px;
  width: 120px;
}

.blog-detail {
  color: black;
  margin-left: 10px;
}

.blog-detail label {
  font-weight: bold;
}

.blog-detail p {
  margin: 5px 0;
}

.blog-detail small {
  font-style: italic;
}

<section class="zodiac-info">
  <div class="blog-entry-container">
    <input  type="search" class="search-box fa fa-search" placeholder="  &#xf002 search">
    <div class="blog-entry">
      <img src="https://i.stack.imgur.com/o6bz4.gif" alt="test image" class="test-img">
      <div class="blog-detail">
        <label>Heading 1</label>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <small>Date: 02-04-2019</small>
      </div>
    </div>
    <div class="blog-entry">
      <img src="https://i.stack.imgur.com/o6bz4.gif" alt="test image" class="test-img">
      <div class="blog-detail">
        <label>Heading 1</label>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <small>Date: 02-04-2019</small>
      </div>
    </div>
    <div class="blog-entry">
      <img src="https://i.stack.imgur.com/o6bz4.gif" alt="test image" class="test-img">
      <div class="blog-detail">
        <label>Heading 1</label>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <small>Date: 02-04-2019</small>
      </div>
    </div>
  </div>
</section>

Answer 3

您可以使用 css网格或 flexbox 。您使用flexbox，所以：

.zodiac-info {
  display: flex;
  justify-content: center;
}


.blog-entry {
  display: flex;
  align-items: center;
  padding: 1rem 0;
}


.blog-entry-name {
  padding: 0px;
}

.zodiac-paragraph {
 color: black;
}

.blog-entry img {
 width: 180px;
 height: 180px;
 min-height: 180px;
 object-fit: cover;
 flex: 1;
}

p.zodiac-paragraph {
   padding: 0 0 0 1rem;
   margin: 0;
}

.blog-entry-container {
    display: flex;
    flex-direction: column;
}

<section class="zodiac-info">
    <div class="blog-entry-container">
    <input  type="search" class="search-box fa fa-search" placeholder="  &#xf002 search">
    <div class="blog-entry">
      <img src="https://cdn-images-1.medium.com/max/1200/1*eXIBeNlLhz4Pe6vDrYkXLQ.png" alt="test image" class="test-img"></p>
      <p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <div class="blog-entry">
        <img src="https://cdn-images-1.medium.com/max/1200/1*eXIBeNlLhz4Pe6vDrYkXLQ.png"  alt="test image" class="test-img">
        <p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
      <div class="blog-entry">
          <img src="https://cdn-images-1.medium.com/max/1200/1*eXIBeNlLhz4Pe6vDrYkXLQ.png" alt="test image" class="test-img">
          <p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p>
        </div>
      </div>
  </section>

Answer 4

由于图像和段落都在同一div中，因此可以使用绝对和相对位置。

.blog-entry {
    position: relative;
}

.zodiac-paragraph, .test-img {
    position: absolute;
}

如果这可以解决您的问题，请尝试看一下该Codepen。

https://codepen.io/jls314/pen/EJjVzK

Answer 5

您可以尝试

FieldGroups

如何在图像的右侧放置文本

5 个答案: