浮点 Div 在 CSS 中未按预期工作 [重复]-解网

问：

两个并排的分区 - 流体显示（10 个答案）

上个月关闭。

基本上，我试图将两个元素（特别是元素）浮动到左侧，将宽度设置为 60% 和 40% 以匹配网站的 100% 宽度。<div>

但同样的问题总是发生，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 个边上放置了 10px 的边距，以保持页面边框之间和 div 之间的空间。

但事实证明，每次我尝试实现我上面描述的事情时，“blocktwo”div 都会被放置在“blockone”div 的下方，正如当前 HTML 流所预期的那样，因为两者都是块。但在这种情况下，即使我浮动它们并以百分比设置边距和大小，也会发生同样的事情。

我尝试过：

不设置边距，但这并不能给我想要的结果。
使用边距作为百分比加起来等于 100%，但这只会在边框和框之间产生不均匀的间距。
在 Youtube、AI （ChatGPT）和现在的 Stack Overflow 上寻找一些答案，但我还没有找到解决方案。

这篇文章中代码的结果：

我希望两个块并排，比例正确，中间有空格，我的意思是。

现在，我知道有更简单、更有效的方法可以做到这一点，例如 CSS Flexbox 或 CSS Grid，但出于我正在学习的课程的目的，我希望能够解决我遇到的这个问题。我希望我能够很好地解释问题、结果和一切。谢谢！

HTML css 浮点数

/* 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>

-1赞 Ahmed Ouhssini 10/18/2023 #2

在这里查看结果由为每个 div 添加的边距导致的错误。请注意：您没有一个名为 .boxcontainer 的类

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

-1赞 HTMLNerd_1 10/18/2023 #3

例如，如果您想要 10VW 的利润率，那么将一个盒子设置为 35VW，另一个为 55VW

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

-1赞 whuzurbuddha 10/18/2023 #4

.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;
}

上一个：我需要在CSS中对齐三个跨度，一个在右边，一个在中间，另一个在左边。我该怎么做？[复制]

下一个：UL 未向右移动

浮点 Div 在 CSS 中未按预期工作 [重复]

Float Divs not working as expected in CSS [duplicate]

评论