Float Div在CSS中不按预期工作[重复]

xmq68pz9 于 2023-10-21 发布在其他

关注(0)|答案(4)|浏览(108)

此问题已在此处有答案：

Display a div width 100% with margins（6个回答）
Two divs side by side - Fluid display（10个答案）
2天前关闭。
基本上，我试图浮动两个元素，<div>元素，具体来说，向左，设置宽度为60%和40%，以匹配网站的100%宽度。
但同样的问题总是发生，40%<div>¬ just go below the 60% `。我不知道我是做错了什么还是别的什么。
下面是我的代码：

/* General Styles Preset */

* {
  box-sizing: border-box;
  margin: 0;
}

/* Boxes and containers styles */

div.boxcontainer {
  overflow: hidden;
  width: 100%;
}

.boxone {
  float: left;
  width: 60%;
  height: 300px;
  margin: 10px;
  background-color: aquamarine;
}

.boxtwo {
  float: left;
  width: 40%;
  height: 300px;
  margin: 10px;
  background-color: cadetblue;
}

<div class="container">
  <div class="boxone"></div>
  <div class="boxtwo"></div>
</div>

代码应该做的是从左到右放置两个div，两者都以60/40的比例填充容器的100%宽度。此外，代码在div的4个边放置了10 px的边距，以保持页面边框之间和div之间的空间。
但事实证明，每次我试图实现上面描述的情况时，“blocktwo”div都被放置在“blockone”div下面，正如当前HTML流所预期的那样，因为两者都是块。但在这种情况下，即使我浮动它们并以百分比设置边距和大小，也会发生同样的事情。

我尝试过的：

1.不设置边距，但这并不能给我给予我想要的结果。
1.使用边距作为百分比来加起来是100%，但这只是在边框和框之间创建了不均匀的空间。
1.在Youtube，AI（ChatGPT）和现在的Stack Overflow上寻找一些答案，但我还没有找到解决方案。
Result of the code in this post：

我希望这两块只是并排，在正确的比例和利润，我的意思是，空间之间。
现在，我知道有更简单有效的方法来做到这一点，如CSS Flexbox或CSS Grid，但为了我正在学习的课程，我希望能够解决这个问题。我希望我能很好地解释问题，结果和一切。谢谢你，谢谢！

css

来源：https://stackoverflow.com/questions/77312274/float-divs-not-working-as-expected-in-css

4条答案

按热度按时间

e5nqia271#

正如你所注意到的，网格布局使这变得超级容易。但如果你决定使用浮动，这是旧的“保持你的蛋糕和吃它太”的情况。40% + 60% = 100%，所以你不能添加任何利润。你只需要改变这些宽度。你可以这样做：

/* General Styles Preset */

* {
  box-sizing: border-box;
  margin: 0;
}

/* Boxes and containers styles */

div.boxcontainer {
  overflow: hidden;
  width: 100%;
}

.boxone {
  float: left;
  width: calc(60% - 20px);
  height: 300px;
  margin: 10px;
  background-color: aquamarine;
}

.boxtwo {
  float: left;
  width: calc(40% - 20px);
  height: 300px;
  margin: 10px;
  background-color: cadetblue;
}

<div class="container">
  <div class="boxone"></div>
  <div class="boxtwo"></div>
</div>

赞(0）回复(0）举报 2023-10-21

6za6bjd02#

如果你想要10vw的利润，例如，然后使一个框35vw和其他55vw

.boxone {
     margin-right:5vw;
     width:55vw;
}
.boxtwo {
     margin-left:5vw;
     width:35vw;
}

赞(0）回复(0）举报 2023-10-21

2hh7jdfx3#

check the result here由您为每个div添加的边距引起的错误。小心：你没有名为.boxcontainer的类

div.boxcontainer{
    overflow: hidden;
    width: 100%;
}
div.container{
    overflow: hidden;
    width: 100%;
}

赞(0）回复(0）举报 2023-10-21

rqenqsqc4#

.boxone{
    position: absolute;
    top: 0;
    width: calc(60% - 5px);
    height: 300px;
    margin: 10px;
    background-color: aquamarine;
}
.boxtwo{
    position: relative;
    left: calc(60% + 5px);
    height: 300px;
    width: auto;
    margin: 10px;
    background-color: cadetblue;
}

赞(0）回复(0）举报 2023-10-21

我来回答

Float Div在CSS中不按预期工作[重复]

4条答案

相关问题

热门标签

最新问答