Question

我的图片显示但似乎没有占用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;       
}

Answer 1

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

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

Answer 3

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

使用其他方法或与之共存。：）

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

图像出现但没有出现在div中

4 个答案: