Question

HTML和CSS的新手，并尝试复制网站以获得一些练习。我在复制airbnb网站上的一个部分时遇到了一些麻烦，该部分列出了探索，联系和书籍。出于某种原因，我将图像浮动到左侧，我的h3和p标签不应与图像重叠。我确保将图像显示为块，但h3和p标签重叠，我的边距不起作用。不确定我做错了什么.a

由于

这里是css

.feat-box {
    background-color: red;
    float: left;
    margin-top: 20px;
    width: 282px;
}

.feat-box h3 {
    font-size: 22px;
    font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: rgb(57, 60, 61);
    margin-left: 10px;
    padding-top: 10px;
}

.feat-box p {
    font-size: 17px;
    font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: rgb(57, 60, 61);
    margin-left: 10px;

}

.feat-box img {
    float: left;
    display: block;

}

.feat-box-container {
    margin: auto;
    width: 900px;
}

这是我的HTML

<div class="feat-box-container">
                <div class="feat-box">
                    <img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/contacts.png"/>
                    <h3>Explore</h3>
                    <p>Find the perfect place.</p>
                </div>
                <div class="feat-box">
                    <img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/contacts.png"/>
                    <h3>Contacts</h3>
                    <p>Message hosts.</p>
                </div>
                <div class="feat-box">
                    <img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/check-mark.png"/>
                    <h3>Book</h3>
                    <p>View your itinerary.</p>
                </div>
            </div>

Answer 1

尝试添加

display:inline

到你的

.feat-box p

你可能需要用边距来玩一下才能使文本对齐，但它为我修复了它。

如果您的学习CSS我建议安装firebug，它是一个附加组件，可以帮助您更好地理解CSS的工作原理。

块级元素重叠

1 个答案: