html - 如果我增加另一个 wrapper ， wrapper 边距顶部会增加

Question

谁能解释一下我的 html 设计出了什么问题

<div id="container">
<div id="profile" style="width:200px;float:left;margin-top:20px">
<img src="./profilepic.jpg"  width="190px" height="220px"/>
</div>
<div id="intro" style="width:420px;margin-left:15px;margin-top:30px">
<h3 style="background-color:#000000">Profile  </h3> 
</div> 
</div>

问题是 div 标签(#profile wrapper)正在增加它的 margin top，如果我增加 #intro wrapper 的 margin-top 从很长一段时间以来它是如此令人沮丧的尝试，为什么如果我增加 #intro margin top 它会增加？而且 < h3 > 标签的背景颜色是从图片上方开始的，即使我使用 float 但 < h3 > 标签的文本工作正常，我不明白为什么我会得到这些行为

我为#intro 设置了 width:420 px，宽度是从页面的最左侧开始，而不是从

标签的开始，即从单词 profile 开始？为什么它从页面的最左侧而不是从当前位置应用背景颜色？

如果我使用无序列表

标记而不是 div，则工作正常。请让我知道你的答案为什么它给出错误>

Answer 1

看起来您正在尝试让两个元素彼此相邻，但上边距不同。

CSS

.container {
    clear: left;
    width: 635px;
}
.left,
.right {
    float: left;
}
.left {
    width: 200px;
    margin-top: 20px;
    margin-right: 15px;
}
.right {
    width: 420px;
    margin-top: 30px;
}
h3 {
    background-color: #000;
}

HTML

<div class="container">
    <div class="left">
        <img src="/profilepic.jpg" />
    </div><!-- /left -->

    <div class="right">
        <h3>Profile</h3>
    </div><!-- /right -->
</div><!-- /container -->