代码之家 › 专栏 › 技术社区 › Louis Tran

CSS问题:如何使div子级的填充物适合它们的容器

css html

Louis Tran · 技术社区 · 4 年前

如果我没有这些盒子的衬垫,它们就合适了。但是当我为盒子添加填充物时,它们的宽度会随着填充物的增加而增加,这样它们的边界就在容器之外了。我该怎么解决?

.container {
      border: 1px solid black;
      width: 400px;
      padding: 5px;
    }
    
    .box {
      border: 1px solid red;
      height: 30px;
      width: 100%;
      float: left;
      margin-bottom: 5px;
    }
    
    .pad {
      padding: 5px;
    }
    
    
    .clr {
      clear: both;
    }

    <div class="container">
        <div class="box pad" id="b1">
          Box 1
        </div>
    
        <div class="box pad" id="b2">
          Box 2
        </div>
    
        <div class="box pad" id="b3">
          Box 3
        </div>
    
        <div class="clr">
        </div>
    </div>

谢谢您。

2 回复 | 直到 4 年前

Suboptimierer 4 年前

你有两个选择:

首先:计算宽度减去填充:

.box {
    border: 1px solid red;
    height: 30px;
    width: calc(100% - 12px);
    float: left;
    margin-bottom: 5px;
}

但为什么要减12像素而不是减10像素呢? 左边框(1px)和右边框(1px)为2像素。因此总共12个像素。

.box {
    box-sizing: border-box;
    border: 1px solid red;
    height: 30px;
    width: 100%;
    float: left;
    margin-bottom: 5px;
}

关于盒子大小的一个很好的解释可以在这里找到: https://www.w3schools.com/css/css3_box-sizing.asp

m_sultan 4 年前

添加框大小:边框框到.box

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前