出现但未出现在 div 中的图像答案

【问题标题】：images appearing but not appearing in div出现但未出现在 div 中的图像
【发布时间】：2016-05-05 19:22:29
【问题描述】：

我的图片出现了，但似乎没有占用 div 中的任何空间。

这是我的html：

<div id="header">

    <img id="img_1" src="img/DSC_0195.JPG" alt="Habor 1">
    <img class="img_2-5" src="img/DSC_0197.JPG" alt="Habor 2">
    <img class="img_2-5" src="img/DSC_0904.JPG" alt="Habor 3">
    <img class="img_2-5" src="img/DSC_0901.JPG" alt="Habor 4">
    <img class="img_2-5" src="img/DSC_0903.JPG" alt="Habor 5">
    <img id="img_6" src="img/DSC_0902.JPG" alt="Habor 6">               
</div>

还有我的 CSS：

#header {
    margin:0 auto;
    width: 100%;
}

.img_2-5, #img_1, #img_6{
    width:16.666%;
    display: inline;
    float:left;
}

#img_1 {
    border-radius: 25px 0 0 25px;   
}

#img_6{
    border-radius: 0 25px 25px 0;       
}

【问题讨论】：

只需为您的#header 添加一些高度，例如：- 10vh 或其他内容，然后所有图像都会显示为 div 的一部分..

标签： html css image

【解决方案1】：

这是因为您的图像是浮动的。您需要在父级上添加一个overflow:hidden; 属性以使它们发生在 div 上。

【讨论】：

【解决方案2】：

只需删除图像的浮动，为我工作！

#header {
  margin:0 auto;
  width: 100%;
  border:2px solid black;
  height:auto;
}

.img_2-5, #img_1, #img_6{
  width:16%;
  display: inline;
}

#img_1 {
  border-radius: 25px 0 0 25px;   
}

#img_6{
  border-radius: 0 25px 25px 0;       
}

https://jsfiddle.net/pkmmg6om/1/

【讨论】：

【解决方案3】：

罪魁祸首是 css 表中的 float: left。

使用其他方法或接受它。 :)

【讨论】：

【解决方案4】：

这会有所帮助。

<div id="header">
    <img id="img_1" src="img/DSC_0195.JPG" alt="Habor 1">
    <img class="img_2-5" src="img/DSC_0197.JPG" alt="Habor 2">
    <img class="img_2-5" src="img/DSC_0904.JPG" alt="Habor 3">
    <img class="img_2-5" src="img/DSC_0901.JPG" alt="Habor 4">
    <img class="img_2-5" src="img/DSC_0903.JPG" alt="Habor 5">
    <img id="img_6" src="img/DSC_0902.JPG" alt="Habor 6">  
    <div style="clear:both;"></div>        
</div>

【讨论】：