CSS& HTML:放置多个div /部分和图像

时间:2012-05-02 13:37:07

标签: html css html5 css3

我目前正在设计和编码此布局:

Problem Example

  1. 但是,我不确定如何将“查看更多,向我们发送电子邮件和发送消息”按钮/图标放置在页脚底部,这样它们就是内联的,而不会创建包含每个按钮的替代div分别。

    • 这是出于视觉美学的目的,可以适应或响应正在查看的设备,以及用户/网站所有者是否想要在服务列表中添加更多内容或将更多内容放在推荐区域中, “查看更多,向我们发送电子邮件和发送消息”按钮/图标将被按下以适应。
  2. 你将如何实现“打电话给我们,拜访我们并给我们发电子邮件”区域而不将它们分成4个div / section(1个容器来容纳它们,1个叫我们div,1个访问我们div和1个给我们发电子邮件)。也许是伪:在对图标/图像进行内容处理之前,以某种方式左右浮动?如果这是对的,我真的不太自信。

  3. 我是否也正确排列了“服务,推荐和快速联系”区域......向左浮动,向左浮动并向右浮动?因为左,右设置位置并且“推荐”只是居中,所以只在容器内居中而不是在两列之间?

  4. 我的代码与此类似:http://jsfiddle.net/mSmLH/

    非常感谢任何帮助。


    我申请:
    position: relative给我的父母(页脚)
    我的查看更多按钮为position: inherit;bottom:0; 邮件图标和发送邮件按钮position: absolute;bottom:0;似乎已修复它。我知道可能需要多一点调整但是谢谢你的时间和精力@Surreal Dreams

1 个答案:

答案 0 :(得分:1)

  1. 要对齐各种专利容器底部的物品,首先要确保三个容器div的高度相同。您可以使用position: relative手动调整这三个元素的位置,并对toprightleft规则进行一些调整。

  2. 我不会。将这三个部分放在div中工作正常,这是直接的方法。您可以使用表格,但这是错误的布局方法。你正在以正确的方式做这件事,而且它正在发挥作用。这是一件好事。

  3. 我通常会将它们全部漂浮在左边,但是左边和右边两个(或右边两个和左边一个)是完全合法的,更重要的是,它可以正常工作。在布局方面,有很多方法可以做。你找到了一个有效的 - 这是所有人最重要的设计特色。