Question

我有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>

Answer 1

取决于你想要发生什么，如果你想要突然切断内部div，你可以在overflow:hidden; div上使用outside

或者如果你想内部div永远不会比外部div使用max-width:100%;。但是通过查看你的内部div的200px值，看起来你希望它们更大，但是没有显示所有的内部div。

http://jsfiddle.net/cL1rvr4u/

Answer 2

如果您想将内部div尺寸调整为外部div尺寸，

这样的内容就是您正在寻找的内容。

＆＃13;

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

Answer 3

尝试将overflow:hidden;添加到#outside div。

Answer 4

我会这样做： 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
}

使内部div不超过外部div的边界，CSS，HTML

4 个答案: