转换为无表格布局

我目前使用1个表格来对齐网站的2个主要部分。它现在对我造成了问题，所以我想使用纯CSS。转换为无表格布局

我有一个205px宽的左侧导航栏。占据右侧的其余空间，我想要一个容器（所以在屏幕的右侧，占用屏幕宽度 - 200像素）这个容器没有固定的高度，但我想要它的顶部与导航栏的顶部对齐。

这里是我目前有

一个demo我想该解决方案是类似的，但不能用表，并与侧边栏的顶部对齐的容器的顶部。

我已经做了几次尝试（在我开始使用表格之后），但他们都没有进行远程工作。我是作为最后的手段来到这里的，所以我希望有人能帮忙。

2012-07-29 fruitcup

这是一个很常见的，很解决问题。 [CSS - 等高度列？]（http://stackoverflow.com/questions/2114757/css-equal-height-columns） – 2012-07-29 16:29:43

@Truth这不是我想要做的。 – fruitcup 2012-07-29 16:44:11

它有什么不同？ – 2012-07-29 16:55:50

所以，我最终想出了一个完美的跨浏览器，不使用表格，并且不使用javascript的解决方案。（我感到很骄傲：3）

，而不是解释它，你可以查看我的小提琴完成的演示在这里：http://jsfiddle.net/af9L5/

来源

2012-07-30 21:01:38 fruitcup

Fiddle

.container{height: 100%; border: 1px solid #0f0; display: table;} 
#sidebar{ 
    width:40%; height: 100%; display: table-cell; background: #ccc;  
} 
#sidebar2{ 
    width:60%; height: 100%; display: table-cell; background: #f00;  
} 
body, html { 
    height:100%; 
}

HTML

<div class="container"> 
    <div id="sidebar">links and whatnot go here</div> 
    <div id="sidebar2">this is the container (but its top is not aligned with the sidebar as I would like)</div>  
</div>

注：表单元格属性是由支持支持IE8 +

编辑： 如果你不能使用表单元格，然后你必须使用一些jquery来计算高度。检查this Fiddle

来源

2012-07-29 16:35:22 Dipak

我仍然希望将侧边栏固定在左侧并且垂直居中，就像我最初的小提琴一样。另外这与使用表格几乎相同（因此，我从不使用表格获得的任何安心都被否定） – fruitcup 2012-07-29 16:47:44

@dragonmoray请检查编辑 – Dipak 2012-07-29 17:02:08

我会做这样的事：fiddle

在这里，这仅仅是一个快速小提琴。我必须在明天工作时做类似的事情，所以我可以进行更多的测试。

来源

2012-07-29 16:45:12 Viktor

转换为无表格布局

回答

相关问题