html - 似乎无法在最小/最大宽度流体 div 旁边 float div

标签 html css

我这里有一个div,

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

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

这是我实验的 fiddle 。

Fiddle

我计划用相同宽度和 100% 高度的固定导航栏来覆盖它。现在我只是想让一个 div 漂浮在它旁边,当充满内容或与 leftBanner 重叠时,它不会滑到下面。只要我能正常工作,手动填充内容或为每个页面输入高度都没有问题。

奇怪的是,Dreamweaver 的代码 View 准确地给出了我想要实现的目标,但它在发布时不起作用。

enter image description here

有人知道解决方案吗?

最佳答案

尝试在内容周围放置一个容器,左右浮动,并降低最小和最大宽度:

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%;
}

关于html - 似乎无法在最小/最大宽度流体 div 旁边 float div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24419264/

相关文章:

javascript - 所选选项不运行脚本

javascript - 触摸屏的 CSS 下拉菜单。使用 active 作为悬停

iOS 基于摄像头的条码扫描器(通过 URL)

javascript - Flowplayer 具有不自动播放的播放列表

AngularJS Material md-datepicker白屏背景

跨 tds 的 HTML 表格 div 对齐

html - 如何使用 CSS 在行尾剪切一个词,并将下一个词剪切到下一行?

css - 可重复使用的皮肤代码?

html - 在没有绝对位置的情况下获取父div之外的div

javascript - 根据按钮单击动态更改 iframe 大小