Question

我正在尝试阻止宽度为百分比的浮动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>

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

Answer 1

你在这里 - Click here

<div class="main" style="overflow: hidden;width:100%">
    <div class="t">1</div>
    <div class="t">2</div>
    <div class="t">3</div>
    <div class="t">4</div>
</div>

Answer 2

BBekyarov回答的逻辑是答案，但你需要和＆＃34;溢出：隐藏;＆＃34;如果你想让第4个div实际隐藏在身体上，否则你会有一个水平卷轴，通向＆＃34; 4＆＃34;或者最后一个div内的任何东西。

在他的jsfiddle上升 - http://jsfiddle.net/BY92n/11/

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>

CSS：

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

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

2 个答案: