html - CSS & HTML : Placement of multiple divs/sections and images

Question

我目前已经设计并编码了这个布局:

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

   • 这是出于视觉审美目的，以适应或响应正在查看的设备，以及如果用户/网站所有者想要向服务列表添加更多内容或在推荐区域放置更多内容，则“查看更多、给我们发电子邮件和发送消息”按钮/图标将被向下推以适应。

2. 如果不将它们分成 4 个 div/部分(1 个容器来容纳它们，1 个调用我们 div，1 个访问我们 div 和 1 个给我们发电子邮件 div)。也许是伪 :before content 图标/图像并以某种方式左右浮动？如果这是正确的，我真的不太有信心。

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

我的代码看起来类似于:http://jsfiddle.net/mSmLH/

如有任何帮助，我们将不胜感激。

---

我申请了:
position: relative to my parent (footer)
position: inherit; 和 bottom:0; 到我的 View More 按钮
position: absolute; 和 bottom:0; 到邮件图标和发送消息按钮，这似乎已经修复了它。我知道这可能需要更多调整，但感谢您的时间和努力@Surreal Dreams

Answer 1

1. 要对齐各个专利容器底部的元素，首先要确保三个容器 div 的高度相同。您可以使用 position: relative 手动调整这三个元素的位置。以及对 top 的一些调整和 right或 left规则。

2. 我不会。将这三个部分放在 div 中效果很好，这是最直接的方法。您可以使用表格，但这是错误的布局方法。您正在以正确的方式执行此操作，并且它正在工作。这是好事™。

3. 我通常会将它们全部向左浮动，但两左一右(或两右一左)是完全合法的，更重要的是，它有效。说到布局，有很多方法可以做。您找到了一个可行的 - 这是所有设计中最重要的功能。