我需要一些帮助来构建灵活的html布局.我已经定义了页面换行的最小和最大宽度.在包装内,我有两列,内容和右.
我想要固定宽度右列.但是,我想使内容宽度灵活,因此根据最小宽度和最大宽度,其宽度应该增加或减少.
这是我的html结构：
@H_@R_301_450@_9@
这是CSS,我正在尝试：
@H_@R_301_450@_9@.wrap{
min-width: 780px;
max-width: 1140px;
margin: 10px auto;
}
.right{
float:left
width: 200px;
}
.content{
float: left;
width: ?? //what should i do here?
}
首先,还应清除容器(在您的情况下为.wrap)以用于浮动.这是关于“clearfix”的一个很好的Stackoverflow问题. “Clearfix-ing”将确保容器高度伸展以匹配最长的浮动柱.用于做“人造柱”设计.
What methods of ‘clearfix’ can I use?
其次,需要知道你想要做多少列？ 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％
@H_@R_301_450@_9@.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％的折扣.我稍后会做的.
@H_@R_301_450@_9@.left {
float: left;
width: 60.8% /* removed 1% to give a gutter between columns */
}
.right {
float: right;
width: 38.2%
}
这现在为您提供了一个很好的安全区域,您将避免舍入错误.
此外,现在我们正在使用％,布局将是流动的.您的2列将使用浏览器重新调整大小,直到达到最小/最大像素值.
另外,别忘了“clearfix”
@H_@R_301_450@_9@
当然,在处理流体/柔性网格时需要考虑很多其他因素.
你可以做的一件事是不重新创建轮子,而是使用像Yahoo!这样的CSS框架.或蓝图.我相信他们有这些内置的并且经过了强有力的测试.
另外,我建议阅读响应式网页设计.有一篇关于它的A List Apart文章：http://www.alistapart.com/articles/responsive-web-design/以及由Ethan Marcotte撰写的一本书(该文章的另一篇并由ALA网站出版),这是一本很好的读物.
这本书唯一真正的缺点是它没有涵盖响应式设计的缺点,以及尽管有“酷”因素,许多大牌网页设计师/开发人员仍然选择使用单独的移动/桌面网站设计.
这是一个轻微的偏离主题,因为最初的问题只是谈论流体设计而不是媒体目标大小.
希望有所帮助！
干杯!
原文链接：https://www.f2er.com/html/426148.html