如何保持div内嵌图像的内联块？

Question

.parent{
background:silver;
text-align:center;
display:inline-block;
}

.child{
background:gold;
display:inline-block;
}

.imginside{
display:inline-block;
width:50%;
}

<div class='parent'>
<div class='child'>

<img class='imginside' src='https://static.businessinsider.com/image/50db38a069bedd0d1000000c-750.jpg' alt='img'>

</div>

</div>

如果文本位于child中-则为inline-block。

但是，如果图像在child中-child变成block（背景金色为100％宽）；

如何在child - inline-block中保留图片？

Answer 1

首先，子图像保留在inline-block中。要进行检查，请检查子元素（在chrome上使用devtools）。在元素样式中，它将显示display:inline-block。问题是您给图像赋予了width:50%。尝试使用更多的绝对单位，例如px。我提供了一个工作示例：

.parent{
background:silver;
text-align:center;
display:inline-block;
}

.child{
background:gold;
display:inline-block;
}

.imginside{
display:inline-block;
padding:10px;
}

<div class='parent'>
<div class='child'>

<img class='imginside' src='https://static.businessinsider.com/image/50db38a069bedd0d1000000c-750.jpg' alt='img'>

</div>

</div>

它适用于文本，因为您没有给它％width。 希望这能清除一切。

Answer 2

只需将width:50%添加到div并制作图像max-width:100%;

.parent {
  background: silver;
  text-align: center;
  display: inline-block;
}

.child {
  background: gold;
  display: inline-block;
  width: 50%;
}

.imginside {
  display: inline-block;
  vertical-align:top;
  max-width: 100%;
}

<div class='parent'>
  <div class='child'>

    <img class='imginside' src='https://static.businessinsider.com/image/50db38a069bedd0d1000000c-750.jpg' alt='img'>

  </div>

</div>

Answer 3

在.imginside中添加填充

.imginside{
display:inline-block;
width:50%;
padding: 10px;
}