Question

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

我知道这可能有点难以理解，我抓住了我的div：Capture。如您所见，我的图像高度会影响外部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

您需要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的父级提供宽度。目前它使用最小宽度，将其更改为宽度，并将img的宽度设置为100％，它将扩展为父级的百分比。如下所示：

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

Answer 2

尝试添加以下CSS规则：

 .hotel { vertical-align: top; }

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

div中的图像会影响外部div

2 个答案: