Html 如何防止新行具有百分比宽度的浮动div

我试图防止浮动div上出现新的行，其宽度为百分比

<div style="position: relative; overflow: hidden;">
    <div style="width: 33.33%; float: left;"></div>
    <div style="width: 33.33%; float: left;"></div>
    <div style="width: 33.33%; float: left;"></div>
    <div style="width: 33.33%; float: left;"></div>
</div>

理想效果：第一个div的3个将出现，但最后一个将溢出父div并被隐藏。这必须在内部元素上使用百分比宽度div。谢谢。

给你-

1.
2.
3.
4.

BBekyarov的答案的逻辑是答案，但是如果你想让第四个div真正隐藏，你也需要在主体上加上和“overflow:hidden”；否则你会有一个水平滚动条，指向“4”或最后一个div中的任何内容

站在他的肩膀上-

HTML:

<div class="main">
    <div class="t">1</div>
    <div class="t">2</div>
    <div class="t">3</div>
    <div class="t">4</div>
</div>

---

33.33%*4=133.32%

这将溢出。将

33.33%

更改为

25%

@SpencerWieczorek谢谢。它必须是33%，并且必须在同一行，在溢出点之后没有新行（即在第三个div之后）。好的。但是你说的新台词是什么意思？我做了一把小提琴，间隔似乎没有问题：谢谢你的帮助。我需要的是第四个33%div不可见，因为它与其余部分在同一行。在您的示例中，最后两个div换行。我想防止任何div被换行。@Andypandy将其CSS

display

属性更改为“none”。在这种情况下，元素没有隐藏。您如何看到它？这是不同背景颜色的小提琴，你会看到的。是的，我错过了，我已经编辑了我的答案。我完全没有看到底部的overflow-x，谢谢你指出。嗯，仍然存在问题，例如，当你用箭头或滚动来移动内容时，我想我应该多做一点）它不是隐藏的，只是在页面外<代码>显示：表格单元格是它不隐藏元素的原因。没有它，第四个div不会溢出，而是落在下一行。

<div class="main">
    <div class="t">1</div>
    <div class="t">2</div>
    <div class="t">3</div>
    <div class="t">4</div>
</div>

body {
    overflow: hidden; 
}
.t{
    width:33.33%;
    background-color:gray;
    display:table-cell;
}
.main{
    display:table;
    overflow:hidden;
    position:absolute;
}