CSS: тот же div, 2 разных стиля (для разных дочерних div)

У меня есть div. Внутри этого div находятся 2 меньших div. Я хочу, чтобы один из меньших divs имел overflow:visible, а другой - overflow:hidden. Не могу понять, какие селектора позволяют мне это делать, я думаю, что мне не хватает чего-то супер простого.CSS: тот же div, 2 разных стиля (для разных дочерних 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

Хорошее мышление, я это единственный способ, которым я могу думать о –

Умный. Большое спасибо! –

Не можете вы уменьшаете де width второго ДИВ и снимите отрицательную margin-left так:

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

Demo

EDIT: Добавлено известково() на 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

TRY это,

#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)

ответ

Смежные вопросы