在CSS

Question

我正在做一个项目，我到了一个我决定实现拼贴的地方。 我已经完成了拼贴，它就在这里：Fiddle

但是我想在float的元素上使用属性div1来做同样的事情。

如果可能，我想在right的元素上仅使用属性left和div1，而不会减少该div元素的大小。

抱歉，我不是母语为英语的人，我会尽我所能。

Answer 1

你可以使用display：flex;就像你不必使用float

body {
 /* width: 520px;*/
  margin: 0 auto;
}

/*.div1 p {
	margin-bottom: 0;
	margin-top: 0;

}*/

.div1  {
	display:flex;
  justify-content:center;
}
.div2{
  display:flex;
  justify-content:center;
}

 <div class="div1">
			<img src="http://lorempixel.com/189/324/" alt=""/>
			<img src="http://lorempixel.com/189/324/" alt=""/>
		</div>
		
		<div class="div2">
			<img src="http://lorempixel.com/380/325/" alt=""/>
		</div>

你的意思是这样的吗？

.div1 {
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}
.div2 {
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}

   <div class="div1">
			<img src="http://lorempixel.com/189/324/" alt=""/>
    	<img src="http://lorempixel.com/189/324/" alt=""/>
		</div>
		
		<div class="div2">
			<img src="http://lorempixel.com/380/325/" alt=""/>
		</div>

Answer 2

这就是你要求的。但我建议不要采用这种方法。延长它将是一场噩梦。如果图像大小发生变化，那么只用CSS就无法修复。

body {
  width: 380px;
  margin: 0 auto;
}

.div1{
  position:relative;
  height:324px;
}
.div1 p {
	margin-bottom: 0;
	margin-top: 0;
	width:50%;
    position:absolute;
}

.div1 p:first-child {
  left:0px;
}

.div1 p:last-child {
  left:50%;
}

    <div class="div1">
			<p><img src="http://lorempixel.com/189/324/" alt=""/></p>
			<p><img src="http://lorempixel.com/189/324/" alt=""/></p>
		</div>
		
		<div class="div2">
			<img src="http://lorempixel.com/380/325/" alt=""/>
		</div>

Answer 3

希望您希望看到类似的内容：

body {
  width: 380px;
  margin: 0 auto;
}

.div1{
  text-align:justify;
}

.div1:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.div1 span img{
  width:45%;
}

<div class="div1">      
  <span><img src="http://lorempixel.com/189/324/" alt=""/></span> 
  <span><img src="http://lorempixel.com/189/324/" alt=""/></span>      
</div>

<div class="div2">
  <img src="http://lorempixel.com/380/325/" alt=""/>
</div>

我的评论：我已将'img'宽度值设置为45％，但您可以将其设置为等于或小于50％的任何值。顺便说一句，我建议你使用标签'span'而不是'p'，因为在我看来，'span'更适合这个目的。如果您将使用我的方法，您将能够将任意数量的图像添加到父'div'标记。例如，如果您要添加任意数量的图像并且它们的总宽度将等于或小于100％，则这些图像将均匀地放置在行上。