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

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

发生这种情况是因为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 2

你的元素实际上是浮动的，问题是，如果你检查你的孩子divs你会看到他们的宽度是100％所以看起来他们没有漂浮，而不是给图像你必须给它们的父母width:30%（孩子divs）和width:100%到图像。 DEMO

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

Answer 3

看起来像这样

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

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

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 {width：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>