Question

我正在创建带有按钮的模板。

我的问题很简单但很痛苦。 我似乎无法使所有子元素完全适合每个父元素，同时又要在元素之间留出一些空间

我不想使用：first-child，：last-child选择器

这是我的结构

HTML

<div class="button-container">
     <div class="button-row">
           <div class="button-single">
               <span>Button 1</span>
           </div>
     </div>
     <div class="button-row">
           <div class="button-double">
               <span>Button 2</span>
           </div>
           <div class="button-double">
               <span>Button 3</span>
          </div>
     </div>
</div>

CSS

.button-container{
    margin-top:5%;
    height:45%;
}
.button-row{
    display:flex;
    width:100%;
    max-height:50%;
    position:relative;
    height:100%;
    padding:5px 0;
    overflow:hidden;
    box-sizing: border-box;
}
.button-row div{
    border-radius:3px;
    border:1px solid #000ccc;
    position:relative;
    box-sizing: border-box;
}
.button-row span{
    font-size:1rem;
    width:fit-content;
    height:fit-content;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
}
.button-single{
    width:100%;
    margin:0px 5px;
    height:100%
}
.button-double{
    width:50%;
    margin:0px 5px;
    height:100%;
}
.button-footer{
    margin-top:2%;
    height:8%;
    font-size: 20px;
}

当我为行空间的每个行容器设置填充时，整个包裹都很好地包裹了孩子

但是，单个按钮元素溢出了其父元素（按钮行）

如果我在按钮行上将padding:5px 0更改为margin:5px 0 按钮行似乎很好地容纳了它的孩子。

但是现在的问题是行元素溢出了它的父元素

我在这里想念什么？

我不希望任何子元素溢出任何父元素。

Answer 1

我已经从{ "status": "200", "data": { "data": [{ "assignedToRole": null, "taskAssignedTo": { "type": "User", "who": "user123" }, "instanceId": 308611, "instanceStatus": "Terminated", "taskAttachedExtActivityRef": null, "taskAttachedInfoPathFormRef": null, "taskId": 613750, "taskStatus": "Closed" }, { "assignedToRole": null, "taskAssignedTo": { "type": "User", "who": "user123" }, "instanceId": 308622, "instanceStatus": "Terminated", "taskAttachedExtActivityRef": null, "taskAttachedInfoPathFormRef": null, "taskId": 613763, "taskStatus": "Closed" }, ... ] } }中删除了height，并在其中设置了.button-single, .button-double，还从margin: 5px;中删除了margin / padding。

希望它能解决您的问题。

.button-row

body{
  height: 100vh;
  display: block;
  position: relative;
}
.button-container{
    margin-top: 5%;
    height: 45%;
}
.button-row{
    display: flex;
    width: 100%;
    max-height: 50%;
    position: relative;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.button-row div{
    border-radius: 3px;
    border: 1px solid #000ccc;
    position: relative;
    box-sizing: border-box;
}
.button-row span{
    font-size: 1rem;
    width: fit-content;
    height: fit-content;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.button-single, .button-double {
  margin: 5px;
}
.button-single{
    width: 100%;
}
.button-double{
    width: 50%;
}
.button-footer{
    margin-top: 2%;
    height: 8%;
    font-size: 20px;
}

Answer 2

body{
  height: 100vh;
  display: block;
  position: relative;
}
.button-container{
    margin-top: 5%;
      /* problem here 
    height:45%;*/
}
.button-row{
    display: flex;
    width: 100%;
    max-height: 150px;
    position: relative;
    height: 150px;
    margin: 5px 0; 
    overflow: hidden;
    box-sizing: border-box;
}
.button-row div{
    border-radius: 3px;
    border: 1px solid #000ccc;
    position: relative;
    box-sizing: border-box;
}
.button-row span{
    font-size: 1rem;
    width: fit-content;
    height: fit-content;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.button-single{
    width: 100%;
    margin: 0px 5px;
    height: 100%;
}
.button-double{
    width: 50%;
    margin: 0px 5px;
    height: 100%;
}
.button-footer{
    margin-top: 2%;
    height: 8%;
    font-size: 20px;
}

 <div class="button-container">
   <div class="button-row">
     <div class="button-single">
       <span>Button 1</span>
     </div>
   </div>
   <div class="button-row">
     <div class="button-double">
       <span>Button 2</span>
     </div>
     <div class="button-double">
       <span>Button 3</span>
     </div>
   </div>
</div>

您在钮扣容器上设置了固定高度，因此为什么您的孩子有100％的高度并留有余量的原因将不再存在！

Answer 3

.button-row{
    display: flex;
    width: 100%;
    margin: 5px 0; 
    overflow: hidden;
    box-sizing: border-box;
}
.button-single{
    width: 100%;
    height: 100%;
}

使用百分比形式的高度和宽度不能将其固定为像素

适当地容纳有边缘和填充物的孩子

3 个答案: