3列全浮圖左和全寬相同的寬度

我有一個全屏佈局，我想要的是3列相同的寬度和左浮動。3列全浮圖左和全寬相同的寬度

什麼我有是這樣的：

不浮動，並與寬度100％正常工作

<div class="table_small" style="float:left; margin-right:20px;"> 
<p>lipsum</p></div><div class="table_small" style="float:left; margin-right:20px;"> 
<p>lipsum</p></div><div class="table_small" style="float:left;"><p>lipsum</p></div>

一格。

這是不可能做到這一點與divs？我必須爲此使用一張桌子嗎？

來源

2011-10-25 Leon van der Veen

它是_is_可能的，但是這個html是..很奇怪。我會讓你一個快速的例子:) – Kyle

你應該搜索重複之前，你問一個問題：http://stackoverflow.com/search?q=%5Bhtml%5D+3+collumn+layout&submit=search – ANeves

一個小提示，除非你真的展示了一個網格，否則你就沒有表格標籤。不使用表格構建佈局，使用div –

你需要一個div其顯示設置爲table在你p小號包裹。

HTML

<div class="table_small"> 
    <p>lipsum</p> 
    <p>lipsum</p> 
    <p>lipsum</p> 
</div>

CSS：

.table_small 
{ 
    width: 100%; 
    display: table; 
} 

.table_small p 
{ 
    display: table-cell; 
    border: 1px dashed #000; 
}

父元素<div class="table_small">必須有一組寬度爲這個工作。

Demo for you here。

來源

2011-10-25 09:42:45 Kyle

Thnx這樣做的工作！ –

<div class="row"> 
    <div class="column1" style="float:left; left:0px; width:33%"></div> 
    <div class="column2" style="float:left; left:33%; width:33%"></div> 
    <div class="column3" style="float:left; left:66%; width:33%"></div> 
</div>

來源

2011-10-25 09:42:11 juankysmith

如果它僅限於3列，則可以使用。 – Kyle

他說：我想要的是3個柱子，寬度相同，左邊浮動 – juankysmith

我明白了，但如果他決定將來有3列以上，他會遇到問題。另外，爲什麼你有浮動左和位置？一個或另一個可以工作，當你設置一個元素爲浮動時，它自動設置其位置。 – Kyle

試試此代碼可能會對您有所幫助。您可以根據需要修改樣式屬性。

<html> 
<body style="width:100%; margin:0px;"> 
<div class="table_small" style="float:left; margin:0 10px; border:1px solid; width:31.7%;"> 
<p>lipsum</p></div> 
<div class="table_small" style="float:left; margin:0 10px; border:1px solid; width:31.7%;"> 
<p>lipsum</p></div> 
<div class="table_small" style="float:left; margin:0 10px; border:1px solid;width:31.7%;"><p>lipsum</p></div> 
</body> 
</html>

謝謝。

來源

2011-10-25 09:50:33 pinaldesai

3列全浮圖左和全寬相同的寬度

回答

相關問題