DIV只有两列的CSS布局 [英] DIV-only two column CSS layout

问题描述

我正在修改目前使用两列设计表格的布局，并遇到一些问题。

I'm reworking a layout currently using tables for a two-column design, and ran into some problems.

<div id="frame">

 <div id="leftcol">
  <div id="1">blah</div>
 </div>

 <div id="leftcol">
  <div id="2">blah</div>
  <div id="3">blah</div>
 </div>

</div>

#leftCol
{
 margin-right: 10px;
 width: 49%;
 float: left;
}

#rightCol
{ 
 width: 49%;
 float: left;
}

最初我有一个两列的表， width = 100％ - 这在Firefox中工作完美，但在IE中，表溢出了 #frame div容器。我删除了这个表，并添加了两个浮动的div，但我仍然有问题，使列相等。

Originally I had a two-columned table with width=100% - this worked perfectly in Firefox, but in IE the table overflowed the #frame div container. I removed this table and added two floated divs, but I still have issues getting the columns to be equal.

我的所有内容都驻留在div #frame ，它有高度限制以及填充和边距（我使用这个在页面的边缘留下一个gutter）。

All of my content resides inside the div #frame, which has height constraints as well as padding and a margin (I use this to leave a "gutter" around the edge of the page).

我需要两个浮动的DIV列具有相同的宽度，并且彼此相邻，其间有一个10px（ish）的间距。我试图使两个 width：50％，但是失败，因为他们在（ #frame 宽度，然后整个页面。

I need the two floated DIV columns to be the same width, and sit next to each other with a 10px (ish) gutter in between. I tried making both width: 50%, but this fails because the container they are in (#frame) is smaller width-wise then the whole body of the page. (If I get rid of the gutter padding, it works in FF but still not in IE.

使每一列的宽度：49％的作品，但看起来丑陋的大小（如果我摆脱了水槽填充，它工作在FF，但仍然不是在IE。在浏览器和右栏之间的更改不与 #frame 容器的边缘对齐。

Making each column width: 49% works, but looks ugly as the size changes between browsers and the right column does not line up with the edge of the #frame container.

这之前，但最终回到表9，因为它似乎工作），但现在我看到它与IE不兼容我已经工作了几个小时，以找到一个跨浏览器的CSS解决方案。任何想法？

I tried doing this before but ultimately went back to tables 9since it seemed to be working), but now that I see it's incompatible with IE I've been working for hours to find a cross-browser css solution. Any ideas?

推荐答案

将每列设置为50％应该有效，如果你确保他们没有任何边距或paddings 。

Setting each column to 50% should work, if you make sure they don't have any margins or paddings.

如果他们需要填充，放入一个额外的封装div，可以有尽可能多的填充/边距为必需。

If they need padding, put in an extra wrapper div, that can have as much padding/margins as neccesary.

对于两者之间的沟槽，您可以给这些包装器div在左/右边的边框，使它看起来像一个空格在列之间。

For the gutter in between, you could give these wrapper divs a border on left/right side to make it look like a space in between the columns.

发布完整的代码示例（例如在jsbin.com上）也有助于我们更轻松地了解您的问题。 ：）

Posting a full code example (on jsbin.com for example) would also help us understand your problem more easily. :)

这篇关于DIV只有两列的CSS布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！