Question

我有一个div有三个div，就像这样：

#parent
   #child-1
   #child-2
   #child-3

我希望它看起来像这样：

子级2应该垂直使用可用空间，因为child-3是display：none默认情况下，并且仅在某些事件上显示，因此它应该将child-2向上推。孩子-3应该尽可能高。

我喜欢使用flexbox，但我想我不能在这里使用它。把它们放在另一个div中真的很容易，只需在那个盒子和flex-direction：列上做一个flex，但是我没有这个机会，所以它们和child-1在同一个div中。

那么使用纯CSS实现这一目标的最简单方法是什么，而不涉及HTML结构？

Answer 1

这是一个有效的例子：

         #parent {
            height: 50em;
         }
         div[id^=child] {
            border: 2px solid black;
            box-sizing: border-box;
         }
         #child1 {
            height: 100%;
            min-height: 32em;
            background: red;
            width: 30%;
            float: left;
            margin: 0;
         }
         #child2 {
            height: 60%;
            background: green;
            width: calc(70% - .4em);
            margin-left: calc(30% + .4em);
            margin-bottom: .4em;
         }
         #child3 {
            height: calc(40% - .4em);
            min-height: 10em;
            background: yellow;
            width: calc(70% - .4em);
            margin-left: calc(30% + .4em);
         }

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>The HTML5</title>
   </head>
   <body>
      <div id="parent">
         <div id="child1">
         </div>
         <div id="child2">
         </div>
         <div id="child3">
         </div>
      </div>
   </body>
</html>

在父母中分发3个chlidren

1 个答案: