html - DIV 操作

Question

这是一个非常简单的新手问题。 我刚开始学习基本的 HTML，当我试图以不同的顺序将 3 个 div 放在一起时，我卡住了。 我需要 3 个 DIV 元素:第一个应该在左边，它是拇指的 DIV。第二个应该放在右侧，将 padding-left 选项设置为 5px，然后第三个 div 应该放在第二个 div 的下方，两个 div 的高度应该与第一个 div 的拇指大小 (50x50px) 匹配。

这是我的代码，我试图创建它，但仍然没有成功。

    <div style="width: 500px;">
        <div style="float: left;">
            <img src="http://www.avatarsdb.com/avatars/fire_01.gif" width="50px" height="50px">
        </div>
        <div style="padding-left:10px; width:100px;">top</div>
        <div style="float: left; padding-left:10px; width:100px;">bottom</div>
    </div>

我知道如何使用 Table 解决它，但是使用 DIV 我无法自己解决它，因为我太新了。

Answer 1

我对你的问题有点困惑，但希望这能帮助你......

我会将拇指 div 包裹在它自己的包装器中，然后将第二个 2 div 一起包裹在另一个包装器中，并将包装器 float 到左侧。如下:

* {
  box-sizing: border-box;
}
.wrapper > .left, .wrapper > .right {
  float: left;
}
.left {
  width: 50px;
  height: 50px;
}
.right .top, .right .bottom {
  height: 25px;
  width: 100px;
  padding-left: 5px;
}
.right .top {
  background-color: yellow;
}
.right .bottom {
  background-color: red;
}

<div class="wrapper">
  <div class="left">
    <img src="http://www.avatarsdb.com/avatars/fire_01.gif" width="50px" height="50px">
  </div>
  <div class="right">
    <div class="top">
    </div>
    <div class="bottom">
    </div>
  </div>
</div>