Question

我想让两个子div在红框内嵌

.parent {
  width: 35%;
  height: 200px;
  background-color: red;
  display: inline-block;
  margin: 30px auto
}
.parent div {
  display: inline-block;
}

<div class="parent">
  <div style="float : left">
    <img width=30% src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" />
  </div>
  <div style="float : left">
    <img width=30% src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" />
  </div>
</div>

小提琴：here

在子div上使用Float : left和Display : inline-block不起作用。使用display : flex打破了结构。

Answer 1

你的元素实际上是漂浮的，问题是，如果你检查你的孩子divs，你会发现他们的宽度是100％，所以看起来他们没有浮动，而不是给{{1}对于图像，您必须将其提供给父级（子级div）和width:30%图像。的 DEMO

width:100%

Answer 2

这是因为img是replaced element，具有自己的内在维度：

在CSS中，被替换的元素是一个表示超出CSS范围的元素;它们是外部对象，其表示独立于CSS格式化模型。典型的替换元素是： <iframe>，<video>，<embed>，<img>。

和

CSS在某些情况下特别处理被替换的元素，比如何时计算边际和一些自动值。

请注意，如果此处有文字而非图片，则可以按照需要运作：

.parent {
  width: 35%;
  height: 200px;
  background-color: red;
  display: inline-block;
  margin: 30px auto
}
.parent div {
  display: inline-block;
}

<div class="parent">
  <div style="float : left">
    Text 1
  </div>
  <div style="float : left">
    Text 2
  </div>
</div>

的解决方案：

所以解决方案是在这里为replaced element指定容器的尺寸。

请为.parent div添加宽度，并为max-width: 100%添加img以填充.parent div，如下所示：

.parent { width: 35%; height: 200px; background-color: red; display: inline-block; margin: 30px auto } .parent div { display: inline-block; width: 30%; } .parent div img { width: auto; max-width: 100%; }

<div class="parent"> <div style="float : left"> <img width=30% src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" /> </div> <div style="float : left"> <img width=30% src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" /> </div> </div>

Answer 3

看起来像这样

＆＃13;

.parent {
  width : 35%;
	height : 200px;
	background-color : red;
	display : inline-block;
	margin : 30px auto
}
.parent div {
  float:left;
  width:50%;
  padding:5px;
  box-sizing:border-box
}

＆＃13;

<div class="parent">
  <div >
    <img width=100% src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" />
  </div>
  <div >
  <img width=100% src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" />
  </div>
</div>

＆＃13;

Answer 4

只需从float: left;移除.parent div，然后将.parent div样式display: inline-block;更改为display: inline;

.parent {
  width : 35%;
  height : 200px;
  background-color : red;
  display : inline-block;
  margin : 30px auto
}
.parent div {
  display : inline;
}

<div class="parent">
  <div>
    <img width=30% src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" />
  </div>
  <div>
  <img width=30% src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" />
  </div>
</div>

Answer 5

希望这对你有所帮助。我添加了

.parent div { 宽度：100％; }

和

.parent div img {width：50％;向左飘浮; }

.parent {
  width : 35%;
	height : 200px;
	background-color : red;
	display : inline-block;
	margin : 30px auto
}
.parent div {
     width: 100%;
}
.parent div img{width:50%;float:left;}

<div class="parent">
  <div>
    <img  src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" />
  </div>
  <div>
  <img src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" />
  </div>
    <div>
  <img src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" />
  </div>
</div>

div不在父div中浮动，显示内联块

5 个答案: