css - 不使用绝对定位的 HTML 布局

Question

经过几天的努力(我知道专业人士只需要几分钟)，我终于设计出了我想要的布局。现在唯一的问题是它使用了很多绝对定位，我听说这是邪恶的或者至少是不受欢迎的。这是 jsfiddle我是如何做到这一点的。有人可以指导其中哪些 <div> s 可以避免绝对定位，而是使用更流畅的结构吗？

Answer 1

我不确定你在哪里可以避免在那个 fiddle 中使用 absolute 定位，因为我没有通过你的 css。但是如果旧版浏览器支持不是问题，你可以创建这个布局而不使用 absolute 定位..

检查这个Fiddle

• 它使用 css3 calc() 函数，因此只能在现代浏览器中使用。
• 由于 display:inline-block 元素的空白问题，损失了 1% 的宽度

这是另一个 Fiddle使用 display:flex 属性可以避免空白问题。在 Chrome 33.0 FF 28 & IE11 上测试并正常工作(这是一个惊喜!:)

CSS Flexible boxes 可以更轻松地创建布局。 Read more about Flexible Boxes @ MDN

Flexbox guide @ css-tricks