如何将文本 div 完美地放置在图像 div 旁边，而不用文字环绕？

Question

我有 4 个主要 div。 parent div 和 3 child div。 child div 包含一个图像和一些由行 div 编辑的文本 parent。如何让图像 div 浮动到左侧，文本 div 定位在它旁边的右侧，而不让文本在图像下方换行（因为我的图像比图像的高度小文本）。我还希望图像 div 相对于文本 div 垂直居中。请查看我拥有的以及我想要的样子。

.wwuContent {
  width: 70%;
  margin: 0 auto;
  background-color: white;
  height: 100%;
  margin-top: 3px;
  padding: 10px 0px;
  font-family: arial;
}
.mainWWUContent {
  width: 100%;
  background-color: #4a61d5;
  padding: 10px 0;
}
#wwuRows {
  background-color: #4a61d5;
  color: white;
  margin-bottom: 10px;
  padding: 0 20px;
  border: solid red 1px;
}
#wwuText {
  border: solid blue 1px;
}
#wwuImages img {
  width: 90px;
  height: auto;
}
#wwuImages {
  border: solid green 1px;
  float: left;
  margin-top: 25px;
}

<div class="wwuContent">
  <div class="mainWWUContent">
   <div id="wwuRows">
    <div id="wwuImages">
     <img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">
    </div>
    <div id="wwuText">
     <h2>Title 1</h2>
     <p>Paragraph 1. Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.</p>
    </div>
   </div>
          
   <div id="wwuRows">
    <div id="wwuImages">
     <img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">
    </div>
    <div id="wwuText">
     <h2>Title 2</h2>
     <p>Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.<br> Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.<br> Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.<br> Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.</p>
       </div>
            </div>
          
   <div id="wwuRows">
    <div id="wwuImages">
     <img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">
    </div>
    <div id="wwuText">
     <h2>Title 3</h2>
     <p>Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.</p>
    </div>
   </div>
  </div>

Answer 1

Flexbox 可以做到这一点：

注意。您在同一页面上重复使用无效的 ID，我将它们切换为类

.wwuContent {
  width: 70%;
  margin: 0 auto;
  background-color: white;
  height: 100%;
  margin-top: 3px;
  padding: 10px 0px;
  font-family: arial;
}
.mainWWUContent {
  width: 100%;
  background-color: #4a61d5;
  padding: 10px 0;
}
.wwuRows {
  background-color: #4a61d5;
  color: white;
  margin-bottom: 10px;
  padding: 0 20px;
  border: solid red 1px;
  display: flex;
}
.wwuText {
  border: solid blue 1px;
}
.wwuImages img {
  width: 90px;
  height: auto;
}
.wwuImages {
  border: solid green 1px;
  . margin-top: 25px;
  display: flex;
  align-items: center;
}

<div class="wwuContent">
  <div class="mainWWUContent">

    <div class="wwuRows">

      <div class="wwuImages">
        <img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">
      </div>

      <div class="wwuText">
        <h2>Title 1</h2>
        <p>Paragraph 1. Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.</p>
      </div>

    </div>
    <div class="wwuRows">

      <div class="wwuImages">
        <img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">
      </div>

      <div class="wwuText">
        <h2>Title 1</h2>
        <p>Paragraph 1. Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.</p>
      </div>

    </div>
  </div>
</div>

Answer 2

由于我要提供的 Flexbox 解决方案已经介绍过了，我将提供一个替代解决方案，其中涉及在文本 div 上设置 margin-left 并定位图像 div 绝对。请注意，您为每个元素 的 id 属性提供的值必须 是唯一的，因此您需要对标记进行一些更改以更正该值。

.wwuContent {
  width: 70%;
  margin: 0 auto;
  background-color: white;
  height: 100%;
  margin-top: 3px;
  padding: 10px 0px;
  font-family: arial;
}
.mainWWUContent {
  width: 100%;
  background-color: #4a61d5;
  padding: 10px 0;
}
#wwuRows {
  background-color: #4a61d5;
  color: white;
  margin-bottom: 10px;
  padding: 0 20px;
  position:relative;
  border: solid red 1px;
}
#wwuText {
  border: solid blue 1px;
  margin-left:90px;
}
#wwuImages img {
  width: 90px;
  height: auto;
  vertical-align:middle;
}
#wwuImages {
  border: solid green 1px;
  left:20px;
  position:absolute;
  top:50%;
  transform:translatey(-50%);
}

<div class="wwuContent">
  <div class="mainWWUContent">
    <div id="wwuRows">
      <div id="wwuImages">
        <img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">
      </div>
      <div id="wwuText">
        <h2>Title 1</h2>
        <p>Paragraph 1. Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.Paragraph 1.</p>
      </div>
    </div>
    <div id="wwuRows">
      <div id="wwuImages">
        <img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">
      </div>
      <div id="wwuText">
        <h2>Title 2</h2>
        <p>Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph
          2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.
          <br>Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.
          <br>Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.
          <br>Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.</p>
      </div>
    </div>
    <div id="wwuRows">
      <div id="wwuImages">
        <img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">
      </div>
      <div id="wwuText">
        <h2>Title 3</h2>
        <p>Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph 3.Paragraph
          3.Paragraph 3.</p>
      </div>
    </div>
  </div>

如何将文本 div 完美地放置在图像 div 旁边，而不用文字环绕？

How to position a text div next to an image div perfectly, without text wrapping around it?

css

parent-child

vertical-alignment

css-float