【问题标题】:How to use the float:left property in CSS without having the trouble I have?如何在 CSS 中使用 float:left 属性而不会遇到麻烦?
【发布时间】:2011-12-31 10:56:00
【问题描述】:
我正在尝试创建一个流布局,但在 css 中使用 float:left 属性时遇到了一些问题。
我有一个 100% 宽度和 100% 高度的父容器。它包含三个容器:
标题、菜单容器和内容容器。
菜单是垂直菜单,不是水平菜单。它位于标题下方,然后内容容器漂浮在菜单容器的左侧。
现在的问题是我想让它成为flowlayout。当我降低分辨率时,浮动内容容器位于菜单容器下方。我希望内容在不低于菜单容器的情况下随流布局浮动。请为此提供解决方案。
谢谢!
这是代码的链接。
http://jsfiddle.net/VdE7Y/
【问题讨论】:
标签:
css
css-float
flowlayout
【解决方案1】:
从#content css 中移除宽度和浮动。
将#wrapper 的背景颜色设置为您希望#content 的背景颜色。
将display: inline-block; 添加到#content css。
更新小提琴 ----> HERE
【解决方案2】:
问题是你为#menu-cont 拥有的min-width
你想要的布局很难维护。