Блог

Кто-нибудь может объяснить, что происходит не так с моим 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, это так неприятно пытаться долгое время, почему это увеличивается, если я увеличиваю верхнюю часть поля #intro? а также цвет фона тега < h3 > начинается с приведенного выше изображения, хотя я использую float, но текст тега < h3 > работает правильно, я не понимаю, почему я получаю такое поведение

Я установил ширину: 420 пикселей для #intro, и ширина начинается с крайней левой стороны страницы, но не с начала тега < h3>, т. Е. со слова profile ? почему он применяет цвет фона с большей части левой части страницы, но не с текущей позиции?

и работает нормально , если я использую неупорядоченный тег list < ul > вместо div . Пожалуйста, дайте мне знать ваши ответы, почему это неправильно>

Похоже, вы пытаетесь расположить два элемента рядом друг с другом с разными верхними полями.

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