div 中的图像会影响外部 div

Question

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

我知道这可能有点难以理解，我拍下了我的 divs：Capture。如您所见，我图像的高度会影响外部 divs。

这是 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; 
}

另一个问题是...当我输入 "width 100%" 时它没有这样做，我只能用像素调整图像的大小...谢谢！

Answer 1

尝试添加以下 CSS 规则：

 .hotel { vertical-align: top; }

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

Answer 2

您需要float div，目前您的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的parent设置一个宽度。目前它使用最小宽度，将其更改为宽度并为您的 img 提供 100% 的宽度，它将扩展为父级的百分比。像下面这样：

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

div 中的图像会影响外部 div

Image in a divs affects external divs

html

css

web