文章/答案/技术大牛

发布

社区首页 >问答首页 >当我向div添加页边距时，页面大小水平增加

问当我向div添加页边距时，页面大小水平增加
EN

Stack Overflow用户

提问于 2021-09-20 14:30:37

回答 2查看 35关注 0票数 0

我已经使用bootstrap创建了一个3x3列的div，所以当我向div添加了左边界和上边界时，页面大小会水平增加。当我移动div时，我希望页面大小保持不变。

.col-4 {
  background-color: black;
  width: 100px;
  height: 100px;
  margin: 10px 0 0 10px;
}

.container {
  margin: 100px 0 0 300px;
}

<body>
    <div class="container">
        <div class="row">
            <div class="col-4" id="square_1"></div>
            <div class="col-4" id="square_2"></div>
            <div class="col-4" id="square_3"></div>
        </div>
        <div class="row">
            <div class="col-4" id="square_4"></div>
            <div class="col-4" id="square_5"></div>
            <div class="col-4" id="square_6"></div>
        </div>
        <div class="row">
            <div class="col-4" id="square_7"></div>
            <div class="col-4" id="square_8"></div>
            <div class="col-4" id="square_9"></div>
        </div>
    </div>
</body>

html

css

回答 2

Stack Overflow用户

发布于 2021-09-20 14:37:56

到目前为止，无论我对您的代码做了什么尝试，水平大小都没有改变。但是，如果你能解释一下你试图在问题出现的地方实现什么，我也许能帮上忙。

票数 0

Stack Overflow用户

发布于 2021-09-20 14:42:14

使用flex system处理方框比使用行和列处理方框更合适，这将为您提供更多的灵活性来处理方框和避免默认的边距和填充，并将在<代码>E110简易方法<代码>E211中保存您的容器宽度<代码>E29。

要实现此更新，请使用以下命令更新您的HTML代码

<div class="container">
  <div class="d-flex">
      <div class="col-4" id="square_1"></div>
      <div class="col-4" id="square_2"></div>
      <div class="col-4" id="square_3"></div>
  </div>
  <div class="d-flex">
      <div class="col-4" id="square_4"></div>
      <div class="col-4" id="square_5"></div>
      <div class="col-4" id="square_6"></div>
  </div>
  <div class="d-flex">
      <div class="col-4" id="square_7"></div>
      <div class="col-4" id="square_8"></div>
      <div class="col-4" id="square_9"></div>
  </div>
</div>

和带有以下代码的CSS

.col-4 {
  background-color: black;
  height: 100px;
  margin: 10px 0 0;
  flex: 0 0 32%;
}

.container {
  margin: 100px 0 0 300px;
}

.container > *{
  justify-content: space-between;
}

享受吧！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69256181

复制

相似问题

问当我向div添加页边距时，页面大小水平增加
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我向div添加页边距时，页面大小水平增加EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我向div添加页边距时，页面大小水平增加
EN