div中的图像会影响外部div

Question

现在我正试图将图像放在div的顶部。div是水平的，我不知道为什么，但当我放置图像时，它的位置会影响所有外部div。。。我的意思是，图像应该只影响我放置它的div

我知道这可能有点难以理解，我捕获了我的潜水器：捕获。正如您所看到的，我的图像的高度会影响外部div。

这是HTML代码：

     <div class="hoteles">
        <div class="head-hoteles">Los mejores hoteles</div>
        <div class="hotel"><img src="images/hotels/hotel-bellevue.jpg" alt="Hotel Bellevue"></div>
        <div class="hotel">Hotel1</div>
        <div class="hotel">Hotel1</div>
        <div class="hotel">Hotel1</div>
        <div class="hotel">Hotel1</div>
     </div>

和CSS：

.hoteles{
 background-color: pink; 
 height: 100%; 
 width: 65%; 
 float: left; 
 padding-left: 2%; 
 }
.head-hoteles{
width: 100%; 
height: 100px; 
background-color: yellow; 
padding: 5%; 
font-size: 1.5em; 
}
.hotel{
height: 12.5em; 
min-width: 23%; 
display: inline-block;
background-color: brown; 
margin-bottom: 2%; 
}
.hotel img{   
width: 100px; 
}

另一个问题是…当我设置"宽度100%"时，它不起作用，我可以用像素调整图像大小。。。谢谢

Answer 1

您需要floatdiv，目前您的div定位为inline-block，这会导致混乱。此外，您还可以使用vertical-align: top订购inline-block。

工作示例：

JSFiddle

.hoteles {
    background-color: pink;
    height: 100%;
    width: 65%;
    float: left;
    padding-left: 2%;
}
.head-hoteles {
    width: 100%;
    height: 100px;
    background-color: yellow;
    padding: 5%;
    font-size: 1.5em;
}
.hotel {
    height: 12.5em;
    min-width: 23%;
    background-color: brown;
    float: left;
    margin:2% 5px 2% 0;
}
.hotel img {
    width: 100px;
    float:left;
}

<div class="hoteles">
    <div class="head-hoteles">Los mejores hoteles</div>
    <div class="hotel">
        <img src="images/hotels/hotel-bellevue.jpg" alt="Hotel Bellevue" />
    </div>
    <div class="hotel">Hotel1</div>
    <div class="hotel">Hotel1</div>
    <div class="hotel">Hotel1</div>
    <div class="hotel">Hotel1</div>
</div>

至于您的第二个问题，您需要为img的父级提供一个宽度。目前它使用最小宽度，将其更改为宽度，并为img提供100%的宽度，它将扩展到父对象的百分比。如下所示：

.hotel {
   width: 23%;
}
.hotel img {
    width: 100%;
}

Answer 2

尝试添加以下CSS规则：

 .hotel { vertical-align: top; }

您将看到内联元素沿着基线定位的结果。