header 中的嵌入式 div：css 问题

Question

我正在尝试使用 header 中的嵌入式 divs 创建以下结构：

红色部分的高度和宽度已知并修正
绿色矩形的高度已知并固定
框架的整体宽度可以变化，但绝不会小于红色部分

我已尝试使用以下 html 代码：

<header id="header">
  <div id="yellowAndGreen">
      <div id="yellow"></div>
      <div id="green"></div>
  </div>
  <div id="red"></div>
</header>

以及以下 CSS：

#header {
    width: 400px;  
}
#yellowAndGreen {

}

#yellow {    
    background-color: yelow;
}

#green {    
    background-color: green;
    height: 40px;
}

#red {    
    height: 150px;
    width: 150px;
    background-color: red;
}

但它不起作用。我创建了一个 JsFiddle。任何人都可以修改它来创建我正在寻找的东西吗？

Answer 1

这使用了 flexbox，它在较旧的浏览器上有一些支持下降。为简单起见，我排除了供应商特定的属性。

#header {
    width: 400px;  
    display: flex;
}
#yellowAndGreen {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

#yellow {    
    background-color: yellow;
    flex-grow: 1;
}

#green {    
    background-color: green;
    height: 40px;
}

#red {    
    height: 150px;
    width: 150px;
    background-color: red;
}

Answer 2

使用float:right;使红框向右浮动。您需要调整 html:

<header id="header">
  <div id="alldivs">
      <div id="red"></div>
      <div id="yellow"></div>
      <div id="green"></div>
  </div>
</header>

和 css:

#header {
    width: 400px;  
}
#yellow {    
    background-color: yellow;
    height:110px;
}

#green {    
    background-color: green;
    height: 40px;
}

#red {    
    height: 150px;
    width: 150px;
    background-color: red;
    float:right;
}

请注意您拼写错误 "yellow"，您需要为黄色设置高度 <div>。

终于here is the adjusted fiddle

希望对您有所帮助

Answer 3

不需要浮动或 flexbox！

稍微重新排列了您的 HTML。将 #header background-color 设置为 red 和 min-width 这样它就永远不会太小。使用 calc() 作为 #yellow 的宽度，这样父级的背景红色将始终为 150px 宽。

#header {
    width: 400px;
    background-color: red;
    width: 100%;
    min-width: 150px;
}

#yellow {
    height: 150px;
    width: calc(100% - 150px);
    background-color: yellow;
}

#green {    
    background-color: green;
    height: 40px;
}

<header id="header">
      <div id="yellow"></div>
      <div id="green"></div>
</header>

header 中的嵌入式 div：css 问题

Embedded divs in header: css issue

html

css

divide