高度等于动态宽度(CSS流体布局)

Question

高度等于动态宽度(CSS流体布局)是否可以设置与宽度相同的高度(1：1)？例+----------+| body     || 1:3      ||          || +------+ || | div  | || | 1:1  | || +------+ ||          ||          ||          ||          ||          |+----------+CSSdiv {  width: 80%;  height: same-as-width}

Answer 1

我知道这是个老问题，但我遇到了一个类似的问题做仅用CSS解决。这是我的博客帖子讨论解决方案。在这篇文章中包含了一个活例..代码转载如下。

HTML：

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        some text    </div></div>

CSS：

#container {
    display: inline-block;
    position: relative;
    width: 50%;}#dummy {
    margin-top: 75%; /* 4:3 aspect ratio */}#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver /* show me! */}

#container {
  display: inline-block;
  position: relative;
  width: 50%;}#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */}#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */}

<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text  </div></div>