带边框的递归DIV:基本情况

时间:2019-06-22 15:01:37

标签: html css

有可能获得以下DIV s递归定位的杰作

recursive divs have proper borders

使用以下代码。

html, body { width: 100%; height: 100%; margin: 0; }
.outer {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
}
.inner {
    margin: 10px;
    border: 10px solid gray; border-radius: 10px;
    display: flex; flex-direction: column;            
    flex: 1;
}
<div class="outer">
    <div class="inner">
        <div class="inner">
            <div class="inner">
            </div>
        </div>
    </div>
</div>

但是对此有些奇怪。我尝试显示outer框的边框失败(并且box-sizing: border-box;无效)。

您是否可以修改此代码以仅对html, bodyone-box使用样式,其中one-box将同时用于outer DIV以及inner DIV s的任意嵌套?

或者当递归嵌套DIV时,HTML5 / CSS3是否真的需要对基本情况进行这种巴洛克式处理?

我的尝试

html, body {
    width: 100%; height: 100%; margin: 0;
    box-sizing: border-box;
}
.one-box-to-rule-them {
    width: 100%; height: 100%;

    display: flex;
    flex-direction: column;
    flex: 1;

    margin: 10px;
    border: 10px solid gray; border-radius: 10px;

    box-sizing: border-box;
}
<div class="one-box-to-rule-them">
    <div class="one-box-to-rule-them">
        <div class="one-box-to-rule-them">
            <div class="one-box-to-rule-them">
            </div>
        </div>
    </div>
</div>

失败。使用统一的框在外框上添加边框会使框超出范围。

adding a border to the outer box by using the same styling fails

说明

解决我遇到的问题的老师很有价值。一位(也)指出我的知识如何误导我的老师非常宝贵。目前有四个(不错且正确的)答案,但Temani Afif的评论中提供了对我误解的见解。让我用一个图表来说明它。

options for box sizing

我的错误是想当将box-sizing更改为默认值content-box并改为指定box-sizing: border-box;时,框计算将包括全部四个内容,填充,边框和边距。顾名思义,box-sizing: border-box;在计算中包括边框。它不包括边距。

4 个答案:

答案 0 :(得分:3)

您可以依靠flexbox和默认的拉伸对齐方式来执行此操作,而无需指定高度或宽度或框大小:

body {
  height: 100vh;
  margin: 0;
  display: flex;
}

.inner{
  margin: 8px;
  border: 8px solid gray;
  border-radius: 10px;
  display: flex;
  flex-grow: 1;
}
<div class="inner">
  <div class="inner">
    <div class="inner">
      <div class="inner">
        <div class="inner">
        </div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分:1)

从所有元素中删除if answer['field']['id'] == form_fields["name"]: ... ,将边距替换为填充,并删除多余的flex规则:

ratings = [("name","A"),("bio","B"),("interests","C")]
result  = next((r for f,r in ratings if answer['field']['id']==form_fields[f]),"D")
width: 100%

答案 2 :(得分:1)

您有问题的规则是margin,因为无论您将box-sizing设置为border-box,box模型中元素的尺寸都不会包含边距,它基本上是“外部” -间距”。您也不需要所需的flexbox规则!但是当然,您需要某种间距才能达到理想的效果,因此,我选择创建一个将接收边框的伪元素,使其完全适合父对象的尺寸,并为父对象提供双边框宽度的填充模仿您之前的间距:

html, body {
    width: 100%; height: 100%; margin: 0;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.one-box-to-rule-them {
    height: 100%;
    padding: 20px;
    position: relative
}
.one-box-to-rule-them:before {
    border: 10px solid gray; border-radius: 10px;
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
<div class="one-box-to-rule-them">
    <div class="one-box-to-rule-them">
        <div class="one-box-to-rule-them">
            <div class="one-box-to-rule-them">
            </div>
        </div>
    </div>
</div>

编辑:@Ori Drori解决方案更干净,但使用两种方法,我的仅使用一种,但使用的是“丑陋的” CSS(在我看来)= D

编辑:@Temani Afif应该​​是公认的解决方案!

答案 3 :(得分:0)

这是您想要的吗?
如果我正确理解的话,宽度仅100%的问题
像这样:

html, body { height: 100%; margin: 0; }
.outer {
    height: 100%;
    display: flex; flex-direction: column;
}
.inner {
    margin: 10px;
    border: 10px solid gray; border-radius: 10px;
    display: flex; flex-direction: column;            
    flex: 1;
}
<div class="outer">
   <div class="inner">
        <div class="inner">
            <div class="inner">
            </div>
        </div>
    </div>
</div>