似乎不能在最小/最大宽度流体div旁边浮动div

时间:2014-06-25 21:56:30

标签: html css

我在这里有一个div,

#leftBanner {
height: 100%;
background-color: #CCC;
width: 22%;
min-width: 245px;
max-width: 355px;
float: left;
}

似乎并不想让任何div在它旁边浮动。我知道我可以抛弃最小值/最大值或给它一个静态宽度来解决问题,但我想在放弃之前尝试找到解决方案。

这是我试验的小提琴。

Fiddle

我计划用相同宽度和100%高度的固定导航栏覆盖它。现在我只是试图在它旁边浮动一个div,当填充内容或重叠leftBanner时不会滑落。我可以手动填充内容或输入每个页面的高度,只要我可以让它工作。

奇怪的是,Dreamweaver的代码视图给了我我想要实现的目标,但它在发布时并不起作用。

enter image description here

任何人都知道解决方案吗?

2 个答案:

答案 0 :(得分:0)

尝试在内容周围放置一个容器,然后向左和向右浮动,并删除最小和最大宽度:

http://jsfiddle.net/2m4FB/18/

html, body {
      margin: 0;
      padding: 0;
      border: 0;
      height: 100%;
    }
#container{width:100%;
max-width:970px;}
#leftBanner {
    height: 100%;
    background-color: #CCC;
    width: 22%;
float:left;
}
#mainContent {
    height: 2000px;
    background-color: red;
    opacity: .3;
    float:right;
    width:78%;
}

答案 1 :(得分:0)

这可以帮助您在继续操作时弄清楚这种玩法的效果。 Example Here

除非您做出响应,否则可能不需要最小最大尺寸。如果是这种情况,我可以对此有所了解。

#leftBanner {
    width:22%;
    float: left;
    background-color: #CCC;
}
#mainContent {
    width:78%;
    float: left;
    background-color: red;
}