弹性盒

Question

我想在父div中的某个位置将4个div放在彼此旁边。所以div结构就是这个（我称之为maindiv最顶层的div）：

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

现在我想在maindiv的左侧设置div为文本'1'

现在我想在maindiv的左侧以50像素设置文本'2'的div

现在我想在maindiv的左侧以150像素设置文本'3'的div

现在我想在maindiv的左侧以200像素设置文本'4'的div

我认为:-)我已经尝试了所有可能的css结构，但遗憾的是它没有用。

有人有想法吗？

Answer 1

将position: relative提供给主div

position: absolute给孩子们并使用left: xyz; top: xyz定位他们。

Answer 2

希望这会对你有所帮助

                <div> 
                    <div style="float: left;">1</div> 
                    <div style="float: left; margin-left: 50px;">2</div> 
                    <div style="float: left; margin-left: 100px;">3</div> 
                    <div style="float: left;margin-left: 50px;">4</div> 
                </div>

Answer 3

试试这个：

 div div
      {
          float:left;
          margin-left:50px;
      }

编辑：如：修复父母：

div
{
    float:left;
    margin-left:-50px;
}
div div
{
    float:left;
    margin-left:50px;
}

Answer 4

弹性盒

Flexbox 现在是推荐的方式，因为它是最简单和最容易的解决方案

.parent{
  display:inline-flex;
}
.child{
  width:50px;
  height:50px;
  border:1px solid black;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

如何在另一个DIV中将4 DIV的权利对齐

4 个答案:

弹性盒