Question

我有一个有5个孩子的div。我希望父母的空间能够平均分配给5个孩子。因此，如果父级的宽度为1000px，则每个子级的宽度为200px。我尝试为孩子设置width: 20%; height: 20%;，但问题是父母没有定义的身高。父高将由儿童身高决定。因此，如果屏幕调整大小，每个孩子占用1/5 of width of the parent并且孩子的身高也将等于其宽度。所以父宽度将是屏幕的100％，父高度将等于子高度。我尝试了媒体查询，但我认为这是一种更简单的方法，因为我只改变了宽度和高度，我没有改变页面的整体设计。

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

<style>
    #parent {width: 100%}
    .child {}
</style>

Answer 1

基本上你需要保持宽高比的灵活元素。你可以而且应该使用flexbox，因为它很棒，但如果不是，你可以这样做：

.child {
    position: relative;
    width: 20%;     
}
.child:before{
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 ratio */
}

https://jsfiddle.net/srhogfh8/

或者如此处所见：http://www.mademyday.de/css-height-equals-width-with-pure-css.html

（因为display：inline-block，有一个小的红色空间是父容器。你可以摆脱空格和任何需要margin-left：-4px，因为列表的html中没有空格但是你的html看起来会很混乱。）

Answer 2

.child {width:20%;}

将强制孩子成为父宽度的1/5。

Answer 3

height: 20vh;

试试这个，它是视口高度的20％; 更多信息：http://www.w3.org/TR/2006/WD-css3-values-20060919/

对不起，我的意思是

width: 20vw;

视口宽度的20％;

Answer 4

Flexbox的基本示例 - 没有跨浏览器支持的属性：

<div style = 'display:flex'> 
    <div style = 'flex:1;'><div>
    <div style = 'flex:1;'><div>
    <div style = 'flex:1;'><div>
    <div style = 'flex:1;'><div>
    <div style = 'flex:1;'><div>
</div>

Flex：1表示每个尺寸相同。 5盒，100％/ 5 = 20％。

使用flex-wrap:row或flex-wrap:column取决于您希望如何设置，并访问https://css-tricks.com/snippets/css/a-guide-to-flexbox/以了解有关Flexbox的信息

用于跨浏览器支持现代Chrome，Safari，Firefox和IE11 + 我使用以下课程在这个例子中设置它的方式是

.flexme{
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        }
    .flexrow { 
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;
        }   
    .flexrownowrap { 
            -webkit-flex-flow: row nowrap;
            flex-flow: column nowrap;
        }    
    .flexcol { 
            -webkit-flex-flow: column wrap;
            flex-flow: column wrap;
        } `

<div class = 'flexme flexcol'>
  <!-- flexcol assuming you want them in columns -->
  <div class = 'flex1'><div>
  <div class = 'flex1'><div>
  <div class = 'flex1'><div>
  <div class = 'flex1'><div>
  <div class = 'flex1'><div>
</div>

父母内部的流动儿童

4 个答案: