如何在分割表格時將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分割爲兩列？

回答

相關問題