div 不浮动在带有显示内联块的父 div 内答案

【问题标题】：div not floating inside parent div with display inline-blockdiv 不浮动在带有显示内联块的父 div 内
【发布时间】：2017-02-28 13:50:06
【问题描述】：

我想让两个子 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 会破坏结构。

【问题讨论】：

标签： html css image css-float width

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

谢谢，你的代码如此简单易读，但我还是需要看懂解释
哦我终于明白了，所以问题是我没有指定div的width在其中放置了img，所以默认div width是100%， img width 是否是 div 的 30% 无关紧要，因为 div 本身占据了整个红框
这正是正在发生的事情

【解决方案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>

【讨论】：

【解决方案4】：

只需从.parent div 中删除float: left; 并将.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>

【讨论】：

【解决方案5】：

希望这对您有所帮助。我已经添加了

.父 div { 宽度：100%； }

和

.parent div img { 宽度: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>

【讨论】：