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

我其实想要一个div中的两个网格，我的意思是一个网格在右边，其他在左边.....但现在网格出现了。它与你在两行中的表中分裂一样！与我需要拆分div并添加两个并排网格相同。希望你明白我的观点。提前感谢您的支持和回复如何在分割表格时将div分割为两列？

来源

2010-02-07 ahmed

你的主要股利

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

使用CSS中创建两个div，固定每一个正确的一边

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

来源

2010-02-07 14:55:50

这不会表现为表。你无法左右100％身高。 – ciembor 2012-08-05 01:43:13

这一切都取决于您希望为该表达到的设计。有多种方法，每种方法都会产生稍微不同的结果。

您可以更改div上的display CSS属性。使用的最佳值将是table-cell;但是，此值不受任何版本的IE支持。您也可以尝试inline或inline-block的值。
您可以使div浮动到其容器的左侧。
您可以在其容器中使用div的绝对或相对定位;然而，这种方法不适用于流体设计。
您可以切换到span。

来源

2010-02-07 04:29:25

-1

使用表。使用更高效的表格更有意义。像这样的东西就是制作表格，div不是为了制作。

来源

2012-08-15 15:16:50

否;这是*不*有哪些表格是为了！ – 2012-09-27 00:32:31

这是奥马尔阿比德接受的答案的扩展。我从这个开始，不得不作出进一步的修改，以便在我提到的问题的例子中起作用。

我使用类名替代了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; 
}

来源

2015-05-13 06:24:50

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

回答

相关问题