在拆分表格时如何将div拆分为两列？

Question

我实际上想要一个div中的两个网格，我的意思是右边的一个网格，左边的另一个网格.....但是现在网格正在向下看。和你分成两排的桌子一样！同样我需要拆分div并且并排添加两个网格。希望你明白我的观点。提前感谢您的所有支持和回复

Answer 1

在主div中创建两个div

<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>

使用CSS，将每一个修复到正确的一面

#left { float:left }
#right { float:right }

Answer 2

这完全取决于您想要为该表实现的设计。有多种方法，每种方法都会产生略微不同的结果。

1. 您可以更改div上的display CSS属性。最佳使用价值是table-cell;但是，任何版本的IE都不支持此值。您还可以尝试inline或inline-block值。
2. 您可以让div在其容器中向左浮动。
3. 您可以在其容器中使用div的绝对或相对定位;但是，这种方法不适用于流体设计。
4. 您可以切换为span。

Answer 3

这是Omar Abid接受的答案的扩展。我从那开始，不得不进行进一步修改，以便在我所述问题的例子中起作用。

我使用类名而不是ID来完成这项工作，因此我可以在多个实例中调用相同的CSS。这使我能够模拟两个相同大小的细胞。在我的示例中，我使用ems设置固定大小，以便它可以保持其外观跨越一系列表格和桌面浏览器大小（在我的移动CSS中，我有不同的策略）。

要对齐左侧div中的图像，我必须创建一个单独的块（CSS代码中的最后一个块）。

这应该解决大多数情况下的问题

    <div class="BrandContainer">
        <div class="BrandContainerTitle">
            <h1>...</h1>
        </div>
        <div class="BrandContainerImage">
            <img alt="Demo image" src="..." />
        </div>
    </div>

CSS：

    .BrandContainer
{
    width: 22em;
}
.BrandContainerTitle
{
    vertical-align: top;
    float: right;
    width: 10em;
}
.BrandContainerImage
{
    vertical-align: top;
    float: left;
}
.BrandContainerImage img
{
    width: 10em;
}

Answer 4

使用表格。使用更高效的表更有意义。这样的事情是为表格制作的，并且不是为了制作div。