我正在编写我的第一个液体布局,我不得不说它比固定宽度布局更耗时。但是,我看到了优点,所以我想让它发挥作用!
这是我的情况:
这很有用,但前提是主内容部分的内容包含环绕页面整个宽度的文本行。如果内容仅在短行或列表中,则内容部分的宽度与其中的内容相同。由于内容部分是浮动的,这意味着在这些情况下内容看起来不对。显然页面宽度是可变的,因此对于较大的显示器,这个问题更常见。
我正在寻找一种方式来显示内容部分始终填充页面,以便内容位于左侧,即使线条很短,也会向右填充。我已经尝试过绝对定位,但是通过清除浮动的导航和内容部分会弄乱保留在正确位置的页脚。
任何建议都非常有用!
修改:
根据要求,我提供了一些演示页面。
这是一个内容很宽,看起来不错的网页:http://www.qkschool.org.uk/static/redesign/widepage.html
这是一个内容很薄的页面,由于浮动,所以它们都是正确对齐的:http://www.qkschool.org.uk/static/redesign/thinpage.html
非常感谢!
答案 0 :(得分:2)
这一直是我最喜欢的液体布局来源:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
(确保点击所有不同的变体)
我不是说你应该放弃学习自己,但我认为值得一看这些布局中使用的一些技巧。所有这些都在IE6和IE7中运行良好,并使用良好的内容优先源顺序。如果需要,它们可以很容易地变成固定宽度。老实说,从来没有找到我喜欢的另一种布局,就像在本网站上发布的布局一样。
我对这些布局使用的一个变体是用一个额外的内部div包裹每一列,并在此div上设置边距或填充,而不是其他任何东西,这将使宽度和定位计算更简单(你会看到是否你看看吧。我还将整个事物包装在一个div中,以便更容易地实现最大宽度和居中。
祝你好运,如果您需要任何有关此技术的建议,请告诉我,我已经使用它多年了,它对我很有帮助。
答案 1 :(得分:1)
以下是我自己的布局技术的摘要,它在许多网站上使用,它可以使用任意数量的列,但此示例只是处理您的左侧:
示例显示页脚将始终保持在最长列
之下侧边栏可以是任何宽度,只需更改内容的边距以适应,您甚至可以向左侧浮动两个侧边栏 - 然后只需增加#content
上的边距即可清除它们。
或者(或者也可以)侧边栏(或者2)可以向右浮动,然后你只是将#content
div放在右边而不是左边来“清除”它们
这是源订购的,在侧边栏之前的内容..它可以包含任意数量的标题子标题和页脚(或在内容下),而不会影响主“列”区域,并且您可以浮动侧边栏(如果不止一个),也可以以任何顺序改变它们的顺序,宽度,数量,甚至在事实之后,仅通过CSS
我认为我的布局技术甚至可能被合并到一些Drupal主题中并且正在使用中,它当然也被用在一些较大的网站上,但我失去了轨道......它永远不会让我失望:))
这是模板代码..
<强> CSS:强>
html, body {padding: 0; margin: 0;}
#footer,#header {background: #444; color: #fff; clear: both;}
#container { /* always the same don't add anything here */
overflow: hidden;
width: 100%;
}
#contentwrap {/* always the same do not add anything else here */
float: left;
width: 100%;
margin-right: -100%;
}
#content {
margin-left: 270px; /* same as width plus padding of the sidebar(s) and in the same direction(s) */
padding: 20px;
border-left: 1px solid #444;
}
#sidebar {
float: left;
width: 230px;
padding: 20px;
background: #dad;
border-right: 1px solid #444;
}
<强> HTML:强>
<div id="header">header</div>
<div id="container">
<div id="contentwrap">
<div id="content">
<h1>Content remaining width</h1>
<p>add more content here</p>
<h2>Header Level 2</h2>
</div><!-- content -->
</div><!-- contentwrap -->
<div id="sidebar">
<p>short sidebar</p>
<p>add more content here until this gets longer than main and the footer will still stay below</p>
</div>
</div>
<div id="footer">footer</div>
这非常灵活,因为侧边栏也可以固定宽度或流畅,它可以与ems,%,px一起使用..你可以命名
是的,我附上了这段代码;)
已编辑添加
如果较旧的IE(6确实)确实给内容区域内的浮动/悬停带来麻烦,#content
div可能需要设置haslayout,如果是这样的话,只需添加zoom: 1;
实际上在我的布局中我仍然会这样做出于习惯!
答案 2 :(得分:0)
如果从物理学的角度考虑,即使是液体也有界限。当它膨胀太多时会变成气体。当它收缩太多时,它变得坚实。在网页设计中,边界也很重要。我建议研究弹性设计(松散地转换为在特定参数范围内灵活的设计)。
以下是一些可以帮助您入门的链接:
答案 3 :(得分:0)
在没有看到设计的情况下很难分辨,但100%的高度和宽度可以伪造样式父元素(例如使用正文背景或包装div)。
如果您的最后一点并不重要(我猜这是因为您提到了它......)您还可以切换浮动的顺序并从内容中移除浮动。
答案 4 :(得分:0)
您可以尝试使用Fluid 960 grid system - 让它工作,然后删除/重命名类以使其更具语义。