Question

我有一个div。在这个div里面是2个较小的div。我希望其中一个较小的div具有overflow:visible，而另一个拥有overflow:hidden。无法弄清楚选择器允许我做什么，我想我错过了一些超级简单的东西。

编辑抱歉，让我重新说一句：我希望主div将样式overflow:visible仅应用于其中一个子div，而主div也具有样式{ {1}}适用于另一个。

示例：

overflow:hidden

Answer 1

这样的事情会让你朝着正确的方向前进。

<div id="body">
 <div id="visible">This div should overflow.</div>
 <div id="hidden-box">
  <div id="hidden">This div shouldn't.</div>
 </div>
</div>


#hidden-box {position:relative;overflow:hidden;height:100%;width:100%;}

Answer 2

以下是几个解决方案：

HTML：

<div id="body">
    <div id="visible">This div should overflow.</div>

    <div id="hidden1">This div shouldn't.</div>

    <div id="clip">
        <div id="hidden2">This div shouldn't.</div>
    </div>
</div>

CSS：

/* solution 1 uses text-indent to create the clipping and a red block to cover the excess background blue on the right */

#hidden1 {
    width:100%;
    height:100px;
    background-color:#00f;
    color:#fff;
    text-indent: -20px;

    position:relative;
    float:left;
}
#hidden1:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 100%;
    background-color: red;
}


/* solution 2 uses a second div with overflow: hidden to clip the text to get around the parent div's overflow: visible */

#clip {
    overflow: hidden;
    position:relative;
    float:left;
    width: 100%;
}

#hidden2{
    width:100%;
    height:100px;
    background-color:#00f;
    color:#fff;
    margin-left:-20px;

    position:relative;
    float:left;
}

Fiddle here

Answer 3

你不能减少第二个div的de width并删除负面margin-left，如下所示：

#hidden{
  width: calc(100% - 20px);
  height:100px;
  position:relative;
  float:left;
}

Demo

编辑：在CSS上添加了calc（）

Answer 4

你可以做这样的事情，虽然它非常脆弱，所以在现实世界中没用多少：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body {margin: 0;}
#body{
    width:300px;
    height:300px;
    background-color:#f00;
    margin:20px;
    position:relative;
    overflow:hidden;
    border:solid 1px #000;
}

#visible{
    width:300px;
    height:100px;
    background-color:#0f0;
    position:fixed;
    left: 0;
}

#hidden{
    width:300px;
    height:100px;
    background-color:#00f;
    color:#fff;
    position:absolute;
    top: 100px;
    left: -20px;
}

</style>
</head>
<body>

<div id="body">
    <div id="visible">This div should overflow.</div>
    <div id="hidden">This div shouldn't.</div>
</div>

</body>
</html>

Answer 5

尝试这个，

#hidden {
        width: 100%;
        height: 100px;
        background-color: #00F;
        color: #FFF;
        /*margin-left: -20px;  <--- remove this*/
        position: relative;
        float: left;
        overflow: hidden !important;/*add this*/
    }

CSS：相同的div，2种不同的风格（针对不同的子div）

5 个答案: