如何将文本div放在图像div旁边，没有文字环绕它？

时间：2016-08-05 10:20:44

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

我有4个主要的div。父div和3子div。子div包含一个图像和一些由行div作为父级的文本。 如何让图像div向左浮动，文本div在右侧放置，而不在图像下方放置文本（因为我的图像小于文本的高度）。 我也希望图像div垂直居中于文本div。 请查看我拥有的内容以及我想要的内容。What I want it to look like 

.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>

2 个答案:

答案 0 :(得分：1)

由于我要提供的Flexbox解决方案已经涵盖，我将提供另一种解决方案，包括在文本margin-left上设置div并定位图像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>

答案 1 :(得分：0)

Flexbox可以做到这一点：

<强> NB 。您在同一页面上重新使用无效的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>

相关问题
最新问题