DIV操纵

Question

这是一个非常简单和新手的问题。  我刚开始学习基本的HTML，当试图以不同的顺序放置3个div时，我被困住了。   我需要3个DIV元素： 第一个应该向左移动，它是DIV for thumb。 第二个应该转到右侧，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

如果我真的了解你，你需要绝对定位3'rd div。

<div style="width: 500px;position:relative;">
 <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;float:right;height:25px;">top</div>
 
 <div style="padding-left:10px; width:100px;position:absolute;top:25px;right:0;">bottom</div>
 </div>

Answer 2

这可以解决您的问题：

    <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="float:right;">
         <div style="padding-left:10px; width:100px; height: 25px;">top</div>
         <div style="padding-left:10px; width:100px; height: 25px;">bottom</div>
       </div>
    </div>

最简单的方法是对您的联系人进行分组。左侧内容为一个DIV，右侧为一个DIV。每个div都有它的位置。所以不需要在这些div中定位元素。通过这种方式，您可以更自由地在组内独立设计元素。

那么使用样式类呢？这使您的代码更具可读性和更快。

.master {
  width: 500px;
}

.thumb {
  float: left;
}

.thumb img {
  width: 50px;
  height: 50px;
}

.description {
  float: right;
}

.description > div {
  padding-left:  10px;
  width: 100px;
  height: 25px;
}

<div class="master">
   <div class="thumb">
     <img src="http://www.avatarsdb.com/avatars/fire_01.gif">
   </div>
   <div class="description">
     <div>top</div>
     <div>bottom</div>
   </div>
</div>

Answer 3

我对你的问题感到有些困惑，但希望这有助于你...

我会将拇指div包裹在自己的包装中，然后将第二个2 div包裹在另一个包装中，然后将包装器浮动到左侧。如下：

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

Answer 4

像这样，

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

注意：请勿使用内联样式。

Answer 5

您可以使用flexbox执行此任务。 所有div都与头像的高度相匹配，您可以轻松地重新排序它们，以便您可以拥有响应式布局

  

Example codepen

<强>标记

<div class="wrap">
    <div class="wrap__avatar">
       <img src="http://placehold.it/50x50" />
    </div>
    <div class="wrap__column">
       Column (100px left padding)
    </div>
    <div class="wrap__main">
        Main (5px left padding)
    </div>
</div>  

CSS （从SCSS编译）

.wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}

.wrap__avatar {
  order: 1;
}

.wrap__main {
  padding-left: 5px;
  flex: 1;
  order: 2;
}

.wrap__column {
  width: 200px;
  padding-left: 100px;
  order: 3;
}

.wrap > div {
  box-sizing: border-box;
}