div 不在 parent 内浮动 div 显示 inline-block

Question

我想让 child 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>

Fiddle : here

在 child div 上使用 Float : left 和 Display : inline-block 无效。使用 display : flex 会破坏结构。

Answer 1

看起来像这样

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

Answer 3

只需从 .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>

Answer 4

发生这种情况是因为 img 是一个 replaced element 具有自己的内在维度：

In CSS, a replaced element is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model. Typical replaced elements are: <iframe>,<video>,<embed>,<img>.

和：

CSS handles replaced elements specifically in some cases, like when calculating margins and some auto values.

请注意，如果此处有文字而不是图片，则效果如愿：

.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 一个宽度，并为 img 设置 max-width: 100% 来填充 .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 5

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

.parent div { width: 100%; }

和

.parent div img { width:50%; float:left; }

.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 不在 parent 内浮动 div 显示 inline-block

div not floating inside parent div with display inline-block

html

css

image

width

css-float