我目前正在设计和编码此布局:
但是,我不确定如何将“查看更多,向我们发送电子邮件和发送消息”按钮/图标放置在页脚底部,这样它们就是内联的,而不会创建包含每个按钮的替代div分别。
你将如何实现“打电话给我们,拜访我们并给我们发电子邮件”区域而不将它们分成4个div / section(1个容器来容纳它们,1个叫我们div,1个访问我们div和1个给我们发电子邮件)。也许是伪:在对图标/图像进行内容处理之前,以某种方式左右浮动?如果这是对的,我真的不太自信。
我是否也正确排列了“服务,推荐和快速联系”区域......向左浮动,向左浮动并向右浮动?因为左,右设置位置并且“推荐”只是居中,所以只在容器内居中而不是在两列之间?
我的代码与此类似:http://jsfiddle.net/mSmLH/
非常感谢任何帮助。
我申请:
position: relative
给我的父母(页脚)
我的查看更多按钮为position: inherit;
和bottom:0;
邮件图标和发送邮件按钮position: absolute;
和bottom:0;
似乎已修复它。我知道可能需要多一点调整但是谢谢你的时间和精力@Surreal Dreams
答案 0 :(得分:1)
要对齐各种专利容器底部的物品,首先要确保三个容器div的高度相同。您可以使用position: relative
手动调整这三个元素的位置,并对top
和right
或left
规则进行一些调整。
我不会。将这三个部分放在div中工作正常,这是直接的方法。您可以使用表格,但这是错误的布局方法。你正在以正确的方式做这件事,而且它正在发挥作用。这是一件好事。
我通常会将它们全部漂浮在左边,但是左边和右边两个(或右边两个和左边一个)是完全合法的,更重要的是,它可以正常工作。在布局方面,有很多方法可以做。你找到了一个有效的 - 这是所有人最重要的设计特色。