CSS：同一div，2種不同的樣式（針對不同的子div）

我有一個div。在這個div裏面有兩個較小的div。我想要一個較小的div有overflow:visible，另一個有overflow:hidden。無法弄清楚哪些選擇器允許我這樣做，我想我錯過了一些超級簡單的東西。CSS：同一div，2種不同的樣式（針對不同的子div）

編輯對不起，讓我換一種說法：我想主要的div只適用於兒童的div一個風格overflow:visible，而主DIV也有風格overflow:hidden適用於其他。

例子：

http://jsfiddle.net/3fQBt/

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

#body{ 
    width:300px; 
    height:300px; 
    margin:20px; 
    position:relative; 
    float:left; 
    overflow:visible; 
} 

#visible{ 
    width:100%; 
    height:100px; 
    margin-left:-20px; //this should overflow visibly 
    position:relative; 
    float:left; 
} 

#hidden{ 
    width:100%; 
    height:100px; 
    margin-left:-20px; //this should be hidden 
    position:relative; 
    float:left; 
}

來源

2014-02-20 A__

它仍然不是很清楚你想看到什麼。你可以創建一個想要的結果的圖像？ –

http://i.imgur.com/z5M8Lq2.png看看藍色div在紅色父div的左邊溢出的位置？我希望隱藏它（同時保持綠色div溢出的可見性）。 –

這樣的事應該讓你去的正確的方向。

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

來源

2014-02-20 05:54:14 partypete25

好想法，我這是我能想到的唯一方法 –

聰明。非常感謝！ –

你能不能減德的第二個div的width並刪除負面margin-left這樣的：

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

Demo

編輯：在CSS添加鈣（）

來源

2014-02-20 05:38:33 vsgoulart

不，不幸的是，這不適用於我的實際項目...這只是這個例子的一個修復。然而，我發現你之前刪除的答案與第一個孩子和最後一個孩子有關，我認爲這可能奏效。我只是無限期地處理了我所處理的「最後一個孩子」。 –

我的第一個答案是行不通的，因爲CSS只會影響所選div的內部。你想要的是在同一個元素的不同區域有不同的CSS屬性，這是不可能的。 – vsgoulart

對，它不工作。好的，謝謝。 –

你可以做這樣的事情，雖然這是很脆，所以在現實世界中沒有太大的用處：

<!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>

來源

2014-02-20 05:51:34

試試這個，

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

來源

2014-02-20 05:56:07

雖然這不會讓div明顯溢出，但並不能解決問題：/ –

這裏有一對夫婦的解決方案：

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

來源

2014-02-20 06:08:33 Skrivener

CSS：同一div，2種不同的樣式（針對不同的子div）

回答

相關問題