如何完美地将文本 div 放置在图像 div 旁边，而不会环绕它？答案

【问题标题】：How to position a text div next to an image div perfectly, without text wrapping around it?如何完美地将文本 div 放置在图像 div 旁边，而不会环绕它？
【发布时间】：2016-12-11 17:28:48
【问题描述】：

我有 4 个主要的 div。父 div 和 3 个子 div。子 div 包含一个图像和一些由行 div 作为父级的文本。如何让图像 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>

【问题讨论】：

标签： css css-float parent-child vertical-alignment

【解决方案1】：

由于我将提供的 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>

【讨论】：

【解决方案2】：

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>

【讨论】：