1
不知道我做错了什么,但它只是不会在Chrome中工作。我试过将高度改为不同的值,但没用。 问题是.many_boxes_container上的高度不能工作。它的工作是我的Firefox,但不是我的Chrome,我的老师可以看到这个问题。为什么不能在chrome中工作?但在Firefox和其他浏览器中工作得很好?
<section id="mondrian">
<div class="left">
<div class="left_container">
<div class="big_red"></div>
<div class="big_white"></div>
</div>
</div>
<div class="middle">
<div class="middle_container">
<div class="small_yellow"></div>
<div class="small_white"></div>
<div class="small_blue"></div>
</div>
</div>
<div class="right">
<div class="right_container">
<div class="many_boxes">
<div class="many_boxes_container">
<div class="white_blue">
<div class="white_blue_container">
<div class="white"></div>
<div class="blue"></div>
</div>
</div>
<div class="red_white">
<div class="red_white_container">
<div class="red"></div>
<div class="white"></div>
</div>
</div>
</div>
</div>
<div class="yellow">
</div>
</div>
</div>
</section>
#mondrian {
border: solid #000 1px;
margin-top: 50px;
width: 900px;
height: 600px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
background-color: #999;
}
#mondrian .left {
background-color: #333;
flex-grow: 8;
}
#mondrian .left_container {
display: flex;
justify-content: center;
flex-direction: column;
height: 100%;
}
#mondrian .big_red {
background-color: red;
flex-grow: 8;
border: solid #000 8px;
}
#mondrian .big_white {
background-color: white;
flex-grow: 4;
border: solid #000 8px;
}
#mondrian .middle {
background-color: #666;
flex-grow: 3;
}
#mondrian .middle_container {
display: flex;
justify-content: center;
flex-direction: column;
height: 100%;
}
#mondrian .small_yellow {
background-color: yellow;
flex-grow: 2;
border: solid #000 8px;
}
#mondrian .small_white {
background-color: white;
flex-grow: 6;
border: solid #000 8px;
}
#mondrian .small_blue {
background-color: blue;
flex-grow: 4;
border: solid #000 8px;
}
#mondrian .right {
background-color: #999;
flex-grow: 6;
}
#mondrian .right_container {
display: flex;
justify-content: center;
height: 100%;
flex-direction: column;
}
#mondrian .many_boxes {
flex-grow: 4;
}
#mondrian .many_boxes_container {
height: 100%;
background: yellow;
display: flex;
/* flex-direction: row;*/
justify-content: center;
}
#mondrian .white_blue {
flex-grow: 6;
height: 100%;
background-color: blue;
}
#mondrian .red_white {
flex-grow: 2;
height: 100%;
background-color: red;
}
#mondrian .white_blue_container {
display: flex;
justify-content: center;
flex-direction: column;
height: 100%;
}
#mondrian .white_blue_container .white {
flex-grow: 6;
background-color: #fff;
border: solid #000 8px;
}
#mondrian .white_blue_container .blue {
flex-grow: 2;
background-color: blue;
border: solid #000 8px;
}
#mondrian .red_white_container {
display: flex;
justify-content: center;
flex-direction: column;
height: 100%;
}
#mondrian .red_white_container .red {
flex-grow: 2;
background-color: red;
border: solid #000 8px;
}
#mondrian .red_white_container .white {
flex-grow: 4;
background-color: #fff;
border: solid #000 8px;
}
#mondrian .yellow {
flex-grow: 4;
background-color: yellow;
border: solid #000 8px;
}
http://codepen.io/anon/pen/zNVJpq
的问题是,你不必对'.right'定义'height'。 –