在div中的某些文本旁边显示浮动图像

Question

我有一个带有一些文本的div和一个应该出现在文本右侧的图像。

问题是图像出现在右侧，但它不在文本旁边。我使用了float：right和clear选项，但它仍然无法正常工作。

我的代码是：

＆＃13;

＆＃13;

.box {
  width: 600px;
  height: 1000px;
  left: calc( 45% - 200px);
  top: 20%;
  position: absolute;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 0px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
}

.content {
  border: 4px solid red;
  width: 600px;
  word-wrap: break-word;
}

.img {
  margin-left: 15px;
  float: right;
  display: inline-block;
  clear: both;
}

＆＃13;

<div class="box">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
    <img src="http://placehold.it/150x250/000000/ffffff" class="img">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

THIS是我想要做的。

Answer 1

将浮动元素放在第一位：

<div class="box">
  <div class="content">
    <img src="http://placehold.it/150x250/000000/ffffff" class="img">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
  </div>
</div>

它会向左浮动，然后你的文字会填满右边的空格。

首先放置文本，直到文本元素结束后图像才会显示，因此图像将浮动在文本下面。 （就像你没有浮动它一样，它会显示在文本下面。）

展开工作代码段以查看其实际效果：

.box {
	  width: 600px;
	  height: 1000px;
	  left: calc( 45% - 200px );
	  top:20%;
	  position: absolute;
	  border-radius: 5px;
	  border: 2px solid rgba(255, 255, 255, 0.3);
	  padding: 0px;
	  text-align: center;
	  box-sizing: border-box;
	  display: flex;
	}
	.content{
		border: 4px solid red;
		width: 600px;
		word-wrap:break-word;
		
	}
	.img{
		margin-left: 15px;
		float: right;
		display:inline-block;
		clear:both;
	}

<div class="box">
  <div class="content">
	<img src="http://placehold.it/150x250/000000/ffffff" class="img">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
  </div>
</div>

Answer 2

要获得预期的结果，<img>应该在HTML中的<p>标记之前。这是一个例子：

＆＃13;

＆＃13;

.box {
  width: 600px;
  height: 1000px;
  left: calc( 45% - 200px);
  top: 20%;
  position: absolute;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 0px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
}

.content {
  border: 4px solid red;
  width: 600px;
  word-wrap: break-word;
}

.img {
  margin-left: 15px;
  float: right;
  display: inline-block;
  clear: both;
}

＆＃13;

<div class="box">
  <div class="content">
    <img src="http://placehold.it/150x250/000000/ffffff" class="img">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将图片放在 p标记之前，或将放在 p标记内（请参阅我的代码段）。

顺便说一句：当你将float应用于某个元素时，inline-block根本不起作用，而且在这种特定情况下，清算也不起作用。

＆＃13;

＆＃13;

.box {
  width: 600px;
  height: 1000px;
  left: calc( 45% - 200px);
  top: 20%;
  position: absolute;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 0px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
}

.content {
  border: 4px solid red;
  width: 600px;
  text-align: left;
}

.img {
  margin-left: 15px;
  float: right;
}

＆＃13;

<div class="box">
  <div class="content">
    <p><img src="http://placehold.it/150x250/000000/ffffff" class="img">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
    
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;