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包装器）正在增加其保证金最高，如果我增加#intro wrapper的margin-top它如此令人沮丧的尝试从很长一段时间，为什么它增加如果我增加#intro margin top？以及＆lt;背景颜色＆lt; h3＆gt;标签是从图片的上方开始的，即使我使用float但是＆lt; h3＆gt;标签工作正常，我不承认为什么我得到这些行为

我为#intro设置了宽度：420像素，宽度从页面的最左侧开始，但不是从＆lt;的开始处开始。 h3＆gt;标签，即来自word profile？为什么它会从页面的最左边应用背景颜色而不是从当前位置应用背景颜色？

如果我使用无序列表＆lt;工作正常ul＆gt;标签而不是div。请让我知道你为什么给出错误＆gt;

的答案

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 -->

如果我增加另一个包装器，包装器边缘顶部会增加

1 个答案: