我需要一些帮助来构建灵活的html布局.我已经定义了页面的最小和最大宽度wrap.在里面wrap,我有两列,content和right.
我想要固定宽度right列.但是,我想使content宽度变得灵活,因此根据最小宽度和最大宽度,宽度应该增加或减少.
这是我的html结构:
<body>
<div class="wrap">
<div class="content">...</div>
<div class="right">...</div>
</div>
</body>
这是CSS,我正在尝试:
.wrap{
min-width: 780px;
max-width: 1140px;
margin: 10px auto;
}
.right{
float:left
width: 200px;
}
.content{
float: left;
width: ?? //what should i do here?
}
jmb*_*cci 10
在CSS中创建浮动列时,需要学习一些内容.
首先,还应清除容器(在您的情况下为.wrap)以用于浮动.这是关于"clearfix"的一个很好的Stackoverflow问题."Clearfix-ing"将确保容器高度伸展以匹配最长的浮动柱.用于做"人造柱"设计.
其次,需要知道你想要做多少列？2列？3列？
皮肤有不同的方法.您可以执行2列,然后将其中一列再细分为另外两列布局.或者您可以放置3个块容器并将每个容器浮动到总宽度的百分比.IE浏览器.对于3列布局,理论上您希望每个布局宽度为33.33%(取决于您想要如何做到装订线或边距).
第三,你谈到"灵活布局".好吧,灵活的布局不能用于像素宽度,因为像素是静态值.IE浏览器.如果你说宽度是200px,它总是200px,无论你的容器或窗口有多大或多小.
你需要做的是使用百分比.当然,要进行正确灵活的布局,您需要具有基本尺寸.所以,你需要有一个固定的设计,你会说是你的"最佳设计"(我必须松散地使用这个术语,因为真正的灵活和响应式设计应该在大多数情况下看起来很好).
所以,假设您的设计设置为主内容区域.wrap为1000px.您需要使用黄金比例的2列布局.http://en.wikipedia.org/wiki/Golden_ratio
基本上,您希望一列为618px,另一列为1000px - 618px = 382px.
对于CSS,您需要根据百分比来设置它们.要获得百分比,请获取父宽度并将其除以所需宽度.
618px/1000px = .618*100(百分比)= 61.8%
382px/1000px = .382*100(百分比)= 38.2%
.left {
float: left;
width: 61.8%
}
.right {
float: right;
width: 38.2%
}
约瑟夫西尔伯是正确的,你不需要浮动右列,但不这样做可能导致其他意外的问题,如框模型的行为和包裹浮动的左项目,特别是如果一个比另一个短.
你可以应用一个余量来将一列偏移到另一列宽度,但我发现它只是凌乱而且浏览器中的CSS实现可能仍然存在问题(就像我说的那样我不再支持IE6了,它仍然是我们的访客使用它足以支持它).
另请注意,处理%时会遇到舍入错误.某些浏览器在达到".5%"时会向下或向上舍入.这可能会导致浮动列换行,因为它比容器元素大1px.因此,为了安全起见,您可能希望剃掉一点宽度,以便为包装提供1-2px的缓冲区.
一种常见的方法是在左侧和右侧列之间给出一个"空"的沟槽或边距,例如10px.我们的设计中10px是:
10px/1000px = 0.01*100(百分比)= 1%
您现在可以从每列减去0.5%的折扣,或者从一列中减去1%的折扣.我稍后会做的.
.left {
float: left;
width: 60.8% /* removed 1% to give a gutter between columns */
}
.right {
float: right;
width: 38.2%
}
这现在为您提供了一个很好的安全区域,您将避免舍入错误.
此外,现在我们正在使用%,布局将是流动的.您的2列将使用浏览器重新调整大小,直到达到最小/最大像素值.
另外,别忘了"clearfix"
<div class="wrap clearfix">
<div class="left">
<!-- content -->
</div>
<div class="right">
<!-- content -->
</div>
</div>
当然,在处理流体/柔性网格时需要考虑很多其他因素.
你可以做的一件事是不重新创建轮子,而是使用像Yahoo!这样的CSS框架.或蓝图.我相信他们有这些内置的并且经过了强有力的测试.
另外,我建议阅读响应式网页设计.有一篇关于它的A List Apart文章:http://www.alistapart.com/articles/responsive-web-design/以及Ethan Marcotte撰写的一本书(该文章的另一篇并由ALA网站发布)读起来很棒.
这本书唯一真正的缺点是它没有涵盖响应式设计的缺点,以及尽管有"酷"因素,许多大牌网页设计师/开发人员仍然选择使用单独的移动/桌面网站设计.
这是一个轻微的偏离主题,因为最初的问题只是谈论流体设计而不是媒体目标大小.
希望有所帮助!
干杯!