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

Question

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

是否可以设置与宽度相同的高度(1：1)？

例

+----------+

| body     |

| 1:3      |

|          |

| +------+ |

| | div  | |

| | 1:1  | |

| +------+ |

|          |

|          |

|          |

|          |

|          |

+----------+

CSS

div {

  width: 80%;

  height: same-as-width

}

Answer 1

我知道这是个老问题，但我遇到了一个类似的问题做仅用CSS解决。这是我的博客帖子讨论解决方案。在这篇文章中包含了一个活例..代码转载如下。HTML：<div&nbsp;id="container"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="dummy"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="element"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;some&nbsp;text&nbsp;&nbsp;&nbsp;&nbsp;</div></div>CSS：#container&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;50%;}#dummy&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;margin-top:&nbsp;75%;&nbsp;/*&nbsp;4:3&nbsp;aspect&nbsp;ratio&nbsp;*/}#element&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;bottom:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;right:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;silver&nbsp;/*&nbsp;show&nbsp;me!&nbsp;*/}#container&nbsp;{ &nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;width:&nbsp;50%;}#dummy&nbsp;{ &nbsp;&nbsp;margin-top:&nbsp;75%; &nbsp;&nbsp;/*&nbsp;4:3&nbsp;aspect&nbsp;ratio&nbsp;*/}#element&nbsp;{ &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;bottom:&nbsp;0; &nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;right:&nbsp;0; &nbsp;&nbsp;background-color:&nbsp;silver/*&nbsp;show&nbsp;me!&nbsp;*/}<div&nbsp;id="container"> &nbsp;&nbsp;<div&nbsp;id="dummy"></div> &nbsp;&nbsp;<div&nbsp;id="element"> &nbsp;&nbsp;&nbsp;&nbsp;some&nbsp;text&nbsp;&nbsp;</div></div>