我有4个div。三个div在另一个内部。我需要它,以便无论div在内部有多少宽度或高度的像素,它们都不会超过100px宽度的边界,以及外部div的100px高度。有没有办法在CSS中执行此操作?
<style>
#outside {
background-color: green;
position: absolute;
width: 100px;
height: 100px;
}
#inside {
background-color: red;
position: absolute;
width: 200px;
height: 200px;
}
</style>
<div id = 'outside'>
<div id = 'inside'></div>
<div id = 'inside'></div>
<div id = 'inside'></div>
</div>
答案 0 :(得分:4)
取决于你想要发生什么,如果你想要突然切断内部div,你可以在overflow:hidden;
div上使用outside
或者如果你想内部div永远不会比外部div使用max-width:100%;
。但是通过查看你的内部div的200px
值,看起来你希望它们更大,但是没有显示所有的内部div。
答案 1 :(得分:1)
这样的内容就是您正在寻找的内容。
#outside {
background-color: green;
width: 100px;
height: 100px;
}
.inside {
background-color: red;
display: inline-block;
width: 48%;
height: 48%;
}
&#13;
<div id = 'outside'>
<img class="inside" src ="http://hasslefreeliving.com/wp-content/uploads/2012/10/placeholder.gif" />
<img class="inside" src ="http://hasslefreeliving.com/wp-content/uploads/2012/10/placeholder.gif" />
<img class="inside" src ="http://hasslefreeliving.com/wp-content/uploads/2012/10/placeholder.gif" />
</div>
<br/>
this is the normal image size<br/>
<img src ="http://hasslefreeliving.com/wp-content/uploads/2012/10/placeholder.gif" />
&#13;
答案 2 :(得分:0)
尝试将overflow:hidden;
添加到#outside
div。
答案 3 :(得分:0)
我会这样做: position:relative;
#outside {
background-color: green;
position: relative; // change outter div to relative so child is relative to
max-width: 400px; // add a max-width to determine max-width
height: 100px;
}
#inside {
background-color: red;
position: absolute;
width: 100%; // change to 100% if you want to be 100% of above or parent
height: 200px;
overflow:hidden; // might as well add this too
}