Question

＆＃13;

div {
  border: 1px solid black;
}

.div1 {
  height: 600px;
  width: 600px;
}

.div2 {
  height: 300px;
  width: 300px;
  margin-right: 0px;
  margin-top: 0px;
}

.div3 {
  height: 150px;
  width: 150px;
  margin-left: 0px;
  margin-bottom: 0px;
}

＆＃13;

<div class="div1">
  <div class="div2">
    <div class="div3">
    </div>
  </div>
</div>

＆＃13;

在上面的代码我有最大的困惑因为在上面的代码中，边距不受内部div标签的影响所以有人可以告诉我这是什么问题吗？Image Of Output 我想做的是Desire Output 先生，我是这个网站的新手，如果你不想回答或者认为我是傻瓜，请在评论栏中问我，但请不要给予我，因为我被禁止2-3天提出一个新问题所以请提前帮助和谢谢。

Answer 1

您可以在组合中使用float和position: relative/absolute设置的组合，并使用下面显示的设置来获得图像中显示的所需结果。

注意：所有这些都与边距无关。

div {
  border: 1px solid black;
}

.div1 {
  height: 600px;
  width: 600px;
}

.div2 {
float: right;
position: relative;
  height: 300px;
  width: 300px;

}

.div3 {
  height: 150px;
  width: 150px;

  position: absolute;
  bottom: 0;
  left: 0;
}

<div class="div1">
  <div class="div2">
    <div class="div3">
    </div>
  </div>
</div>

Answer 2

无需使用margin，只需使用position属性。

以下是摘录。

div {
  border: 1px solid black;
}
.div1 {
  height: 600px;
  width: 600px;
  position: relative;
  margin: 30px auto;
}
.div2 {
  height: 300px;
  width: 300px;
  position: absolute;
  top: 0;
  right: 0;
}
.div3 {
  height: 150px;
  width: 150px;
  position: absolute;
  bottom: 0;
  left: 0;
}

<div class="div1">
    <div class="div2">
        <div class="div3"> </div>
    </div>
</div>

Answer 3

要获得所需的保证金o / p，这应该是您的代码

['one']
1
1
['two']
1
1

但是，这将是一种错误的方法，正确的方法是操纵内部div向左或向右的定位。这是因为盒子模型的概念。您可以了解有关箱型的更多信息，以便更好地了解何时使用margin-l / r / t / b以及何时使用定位

正确代码：

div {
        border: 1px solid black;
    }

    .div1 {
        height: 600px;
        width: 600px;
    }

    .div2 {
        height: 300px;
        width: 300px;
        margin-left: 300px;
        margin-top: 0px; 
    }

    .div3 {
        height: 150px;
        width: 150px;
        margin-left: 0px;
        margin-top: 150px;
    }

Answer 4

您可以使用position: absolute;然后代替margin-left或margin-top使用left或top或bottom

＆＃13;

div {
            border: 1px solid black;
        }

        .div1 {
            height: 600px;
            width: 600px;
            position: relative;
        }

        .div2 {
            height: 300px;
            width: 300px;
            right: 0px;
            top: 0px;
            position: absolute;
        }

        .div3 {
            height: 150px;
            width: 150px;
            left: 0px;
            bottom: 0px;
            position: absolute;
        }

＆＃13;

    <div class="div1">
        <div class="div2">
            <div class="div3">
            </div>
        </div>
    </div>

＆＃13;

希望这有帮助

在我的情况下，html边距不起作用

4 个答案: