Html 拆分表格时如何将div拆分为两列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2215896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to split a div into two columns as we split a table?
提问by ahmed
I actually wanted the two grids in one div , I mean one grid in right, other in the left .....but for now the grid is appearing down. Its same as you split in a table with two rows !! same as that I need to split a div and add two grids side by side . Hope you get my point . Thanking you all in advance for your awesome support and replies
我实际上想要一个 div 中的两个网格，我的意思是一个网格在右边，另一个在左边......但现在网格出现了。它与您在两行表格中拆分相同！与我需要拆分一个 div 并并排添加两个网格相同。希望你明白我的意思。提前感谢大家的支持和回复
回答by Omar Abid
Create two divs inside your main div
在主 div 中创建两个 div
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
With CSS, fix each one to the correct side
使用 CSS，将每个固定到正确的一侧
#left { float:left }
#right { float:right }
回答by Franci Penov
It all depends on the design you want to achieve for that table. There are multiple approaches, each of them yielding slightly different results.
这一切都取决于您要为该表实现的设计。有多种方法，每种方法都会产生略有不同的结果。
- You can change the
displayCSS property on the divs. The best value to use would betable-cell; however, this value is not supported by any version of IE. You can also tryinlineorinline-blockvalues. - You can make the divs float to the left in their container.
- You can use absolute or relative positioning of the divs in their container; however, that approach doesn't work well with fluid designs.
- You can switch to
span.
- 您可以更改
displaydiv 上的 CSS 属性。最好的使用价值是table-cell；但是，任何版本的 IE 都不支持此值。您也可以尝试inline或inline-block值。 - 您可以使 div 在其容器中向左浮动。
- 您可以在其容器中使用 div 的绝对或相对定位；但是，这种方法不适用于流体设计。
- 您可以切换到
span.
回答by Franci Penov
This is an expansion of Omar Abid's accepted answer. I started with that and had to make further modifications so it would work in my example of the stated question.
这是 Omar Abid 接受的答案的扩展。我从那个开始，不得不做进一步的修改，这样它就可以在我提到的问题的例子中工作。
I made this work with class names instead of IDs so I could call the same CSS in multiple instances. This gave me the the ability to simulate two equal size cells. In my example, I set fixed size with ems so that it could preserve its appearance cross a range of table and desktop browser sizes (in my mobile CSS, I have a different strategy).
我使用类名而不是 ID 来完成这项工作，因此我可以在多个实例中调用相同的 CSS。这使我能够模拟两个相同大小的单元格。在我的示例中，我使用 em 设置了固定大小，以便它可以在各种表格和桌面浏览器大小范围内保持其外观（在我的移动 CSS 中，我有不同的策略）。
To align an image in the left div, I had to make a separate block (the last one in the CSS code).
要在左侧 div 中对齐图像，我必须创建一个单独的块（CSS 代码中的最后一个）。
This should address the question in most instances
在大多数情况下，这应该解决这个问题
<div class="BrandContainer">
<div class="BrandContainerTitle">
<h1>...</h1>
</div>
<div class="BrandContainerImage">
<img alt="Demo image" src="..." />
</div>
</div>
CSS:
CSS：
.BrandContainer
{
width: 22em;
}
.BrandContainerTitle
{
vertical-align: top;
float: right;
width: 10em;
}
.BrandContainerImage
{
vertical-align: top;
float: left;
}
.BrandContainerImage img
{
width: 10em;
}
回答by Wayne McMichael
Use a table. It makes more sense to use tables where they are more efficient. Things like that is what tables are made for, and div is not made for.
使用一张桌子。在效率更高的地方使用表格更有意义。诸如此类的东西就是为表格而制作的，而 div 不是为之制作的。
