问题描述:

Working on a responsive website, I want to remove a certain element, however, I want the child element to still be displayed.

Setting the CSS rule for parent element to display:none; removes that element and all the children. Event if I set the child element to display:block; it still doesn't appear on the site.

Something like this:

HTML:

<div id="parent">

<div id="child">Some text.</div>

</div>

CSS:

#parent {

display:block;

width:500px;

height:200px;

background:blue;

}

#child {

display: inline-block;

padding:20px 5px;

background: red url(someimage.jpg);

}

@media only screen

and (max-device-width : 700px) {

#parent {

/* code that makes the browser disregard the height of this div and not display its background */

}

#child

/* the child is still displayed */

}

}

What would be the proper CSS solution?

网友答案:

It looks like you just want to knock out the background of the parent in certain layouts. To do that, just use

#knockout {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;        
    padding: 0;
}

This will remove the background, the borders and any shadow effects on the parent item - as though it wasn't rendered at all.

网友答案:

You could try setting all children to display:none, and then override it with the display:block for the relevant child. Example:

#parent>* {display:none}
#parent>#child {display:block}
相关阅读:
Top