不使用绝对定位的HTML布局

Question

经过几天的努力（我知道它只需要专业的几分钟），我终于设计了我想要的确切布局。现在唯一的问题是它使用了很多绝对定位，我听说它是​​邪恶的或者至少是不可取的。以下是jsfiddle我如何做到这一点。有人可以指导哪些<div>可以避免绝对定位，而是使用更流畅的构造？

Answer 1

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

检查此Fiddle

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

这是使用display:flex属性的另一个Fiddle，它避免了空白问题。 在Chrome 33.0 FF 28＆amp;上进行了测试并正常运行IE11（这是一个惊喜！:)

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

Flexbox guide @ css-tricks

Answer 2

向左浮动列并使用默认相对定位。如果需要，百分比宽度和设置高度为px。这将是最一致的布局。