1. 首頁
  2. 問答
  3. 簡單的兩列HTML佈局，而無需使用表

簡單的兩列HTML佈局，而無需使用表

2011-06-17 69 views
55

我正在尋找一個超級簡單的方法來創建一個兩列的格式顯示在網頁上的一些數據。我怎樣才能達到相同的格式：簡單的兩列HTML佈局，而無需使用表

<table> 
    <tr> 
     <td>AAA</td> 
     <td>BBB</td> 
    </tr> 
</table>

我也接受HTML5/CSS3技術。

來源

2011-06-17 Fixer

回答

87 
<style type="text/css"> 
#wrap { 
    width:600px; 
    margin:0 auto; 
} 
#left_col { 
    float:left; 
    width:300px; 
} 
#right_col { 
    float:right; 
    width:300px; 
} 
</style> 

<div id="wrap"> 
    <div id="left_col"> 
     ... 
    </div> 
    <div id="right_col"> 
     ... 
    </div> 
</div>

確保colum-widths的總和等於包裝寬度。或者，您也可以使用寬度的百分比值。

有關使用CSS佈局基本技術的更多信息看看這個tutorial

來源

2011-06-17 11:50:03

+6

其實，你並不真的需要什麼浮動的權利，既可以的div有浮動到左側，效果是一樣的東西是OP的要求。 – jackJoe

+12

您正在使用固定寬度的CSS列。表格版本具有動態寬度列。有時需要液體佈局。然後怎樣呢？ – Ryan

+2

漂浮有很多奇怪的副作用，例如，父容器不會在高度上展開以適合這些列的大小，並且會丟失框的大小。 – Mouscellaneous

7

好吧，如果你想超級簡單方法，只是把

<div class="left">left</div> 
<div class="right">right</div> 

.left { 
    float: left;  
}

雖然你可能需要不止這取決於你有什麼其他佈局要求。

來源

2011-06-17 11:57:24 fearofawhackplanet

+2

爲簡單起見。 – Fixer

+0

實際上，代碼就像你一樣，不起作用。 http://jsfiddle.net/EMaDB/ – Shauna

+0

@Shauna：哎呀！我的意思是把'.left'不是'.right' :) – fearofawhackplanet

3

如果你想做到這一點，HTML5的方式（這種特殊的代碼更適合博客等事情，其中​​<article>多次使用，每次博客入門預告一次;最終，元素本身並不重要，它是在造型和元件佈局，將讓你你想要的結果）：

<style type="text/css"> 
article { 
    float: left; 
    width: 500px; 
} 

aside { 
    float: right; 
    width: 200px; 
} 

#wrap { 
    width: 700px; 
    margin: 0 auto; 
} 
</style> 

<div id="wrap"> 
    <article> 
    Main content here 
    </article> 
    <aside> 
    Sidebar stuff here 
    </aside> 
</div>

來源

2011-06-17 12:03:05 Shauna

0 
<div id"content"> 
<div id"contentLeft"></div> 
<div id"contentRight"></div> 
</div> 

#content { 
clear: both; 
width: 950px; 
padding-bottom: 10px; 
background:#fff; 
overflow:hidden; 
} 
#contentLeft { 
float: left; 
display:inline; 
width: 630px; 
margin: 10px; 
background:#fff; 
} 
#contentRight { 
float: right; 
width: 270px; 
margin-top:25px; 
margin-right:15px; 
background:#d7e5f7; 
}

顯然，你需要調整列的大小，以適應您的網站，以及顏色等，但應該這樣做。您還需要確保您的ContentLeft和ContentRight寬度不超過內容寬度（包括邊距）。

來源

2011-06-17 12:18:03 Magnum26

35

我知道這個問題已經回答了，但已經處理了佈局公平一點，我想補充一點，解決了浮動元素幾個傳統問題的備選答案...

你可以看到更新例如在這裏採取行動。

http://jsfiddle.net/Sohnee/EMaDB/1/

沒有什麼差別不管你是用HTML 4.01和HTML5語義元素（你需要將左，右容器聲明爲顯示：塊，如果他們沒有的話）。

CSS

.left { 
    background-color: Red; 
    float: left; 
    width: 50%; 
} 

.right { 
    background-color: Aqua; 
    margin-left: 50%; 
}

HTML

<div class="left"> 
    <p>I have updated this example to show a great way of getting a two column layout.</p> 
</div> 
<div class="right"> 
    <ul> 
     <li>The columns are in the right order semantically</li> 
     <li>You don't have to float both columns</li> 
     <li>You don't get any odd wrapping behaviour</li> 
     <li>The columns are fluid to the available page...</li> 
     <li>They don't have to be fluid to the available page - but any container!</li> 
    </ul> 
</div>

也有相當整齊（雖然新）除了CSS，可以讓你版面內容爲列，沒有這一切玩弄與div的：

column-count: 2;

來源

2011-06-17 12:52:08 Fenton

+2

+1列數 – Petter

+0

這裏是文本垂直對齊div的中間部分 - http://jsfiddle.net/jy9qw/ – mikato

40

那麼，你可以做CSS表而不是HTML表。這使您的html語義上正確，但允許您使用表格進行佈局。

這似乎更有意義比使用浮動黑客。

<html> 
    <head> 
    <style> 

#content-wrapper{ 
    display:table; 
} 

#content{ 
    display:table-row; 
} 

#content>div{ 
    display:table-cell 
} 

/*adding some extras for demo purposes*/ 
#content-wrapper{ 
    width:100%; 
    height:100%; 
    top:0px; 
    left:0px; 
    position:absolute; 
} 
#nav{ 
    width:100px; 
    background:yellow; 
} 
#body{ 
    background:blue; 
} 
</style> 

    </head> 
    <body> 
    <div id="content-wrapper"> 
     <div id="content"> 
     <div id="nav"> 
      Left hand content 
     </div> 
     <div id="body"> 
      Right hand content 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

來源

2013-02-06 23:25:28 RobKohr

+3

I不知道爲什麼這是在底部。 – thatmiddleway

+0

據我可以告訴這是得到沒有可以同時具有動態寬度列和高度相等的單元格的兩列布局的唯一方法。所以如果你想要一個液體佈局，這可能是一條路。 – Ryan

+0

你認爲有一種方法可以將content和content-wrapper聯合成一個html元素嗎？ – dialer

1

此代碼不僅允許您添加兩列，它可以讓你只要你想添加儘可能多的coloumns使它們對齊左或右，改變顏色，添加鏈接等退房的小提琴鏈接也

小提琴鏈接：http://jsfiddle.net/eguFN/

<div class="menu"> 
       <ul class="menuUl"> 
        <li class="menuli"><a href="#">Cadastro</a></li> 
        <li class="menuli"><a href="#">Funcionamento</a></li> 
        <li class="menuli"><a href="#">Regulamento</a></li> 
        <li class="menuli"><a href="#">Contato</a></li> 
       </ul> 
</div>

CSS是如下

.menu { 
font-family:arial; 
color:#000000; 
font-size:12px; 
text-align: left; 
margin-top:35px; 
} 

.menu a{ 
color:#000000 
} 

.menuUl { 
    list-style: none outside none; 
    height: 34px; 
} 

.menuUl > li { 
    display:inline-block; 
    line-height: 33px; 
    margin-right: 45px; 

}

來源

2013-04-05 07:47:43 harishannam

6

所有以前的答案只提供第一列結束和第二列開始的硬編碼位置。我會預料到這不是必需的，甚至不需要。

最近的CSS版本知道一個名爲columns的屬性，這使得基於列的佈局變得非常容易。對於舊版瀏覽器，您還需要包含-moz-columns和-webkit-columns。

這裏是一個非常簡單的例子，它最多可以創建三個列，如果他們每個人都有至少200 pixes寬度，否則使用更少的列：

<html> 
    <head> 
    <title>CSS based columns</title> 
    </head> 
    <body> 
    <h1>CSS based columns</h1> 
    <ul style="columns: 3 200px; -moz-columns: 3 200px; -webkit-columns: 3 200px;"> 
     <li>Item one</li> 
     <li>Item two</li> 
     <li>Item three</li> 
     <li>Item four</li> 
     <li>Item five</li> 
     <li>Item six</li> 
     <li>Item eight</li> 
     <li>Item nine</li> 
     <li>Item ten</li> 
     <li>Item eleven</li> 
     <li>Item twelve</li> 
     <li>Item thirteen</li> 
    </ul> 
    </body> 
</html>

來源

2014-12-13 15:55:54

+1

謝謝，完美無缺。如果需要，是否有辦法強制新的列？ – jtr13

2

我知道這是一個古老的職位，但想通我'd添加我的兩個penneth。如何很少使用和經常忘記的說明列表？用一個簡單的CSS你可以得到一個非常乾淨的標記。

<dl> 
<dt></dt><dd></dd> 
<dt></dt><dd></dd> 
<dt></dt><dd></dd> 
</dl>

看看這個例子http://codepen.io/butlerps/pen/wGmXPL

來源

2016-04-14 13:59:00 philip

7

現在有一個比當這個問題最初是問，五年前更簡單的解決方案。一個CSS Flexbox使得最初要求的兩列布局變得簡單。這是光禿禿的骨頭相當於表中的原題：

<div style="display: flex"> 
    <div>AAA</div> 
    <div>BBB</div> 
</div>

一個關於Flexbox的的好處之一是，它可以讓你輕鬆地指定的子元素應該如何收縮和增長調整到容器的大小。我將在上面的例子中展開以使框爲頁面的整個寬度，使左列至少爲75px寬，然後生長右列以捕獲剩餘空間。我還會將樣式放入適當的塊中，指定一些背景顏色以便顯示列，併爲舊版瀏覽器添加傳統Flex支持。

<style type="text/css"> 
.flexbox { 
    display: -ms-flex; 
    display: -webkit-flex; 
    display: flex; 
    width: 100%; 
} 

.left { 
    background: #a0ffa0; 
    min-width: 75px; 
    flex-grow: 0; 
} 

.right { 
    background: #a0a0ff; 
    flex-grow: 1; 
} 
</style> 

... 

<div class="flexbox"> 
    <div class="left">AAA</div> 
    <div class="right">BBB</div> 
</div>

Flex是比較新的，所以如果你不能支持IE 8和IE 9，你就不能使用它。然而，截至撰寫本文時，http://caniuse.com/#feat=flexbox表示至少部分支持94.04％的市場使用的瀏覽器。

來源

2016-05-16 14:23:03 twm

+0

比浮動更好的解決方案＃如果＃您的瀏覽器需求支持它。 – Sam

0

一些小的改動，使其響應

<style type="text/css"> 
#wrap { 
    width: 100%; 
    margin: 0 auto; 
    display: table; 
} 
#left_col { 
    float:left; 
    width:50%; 
} 
#right_col { 
    float:right; 
    width:50%; 
} 
@media only screen and (max-width: 480px){ 
    #left_col { 
     width:100%; 
    } 
    #right_col { 
     width:100%; 
    } 
} 
</style> 

<div id="wrap"> 
    <div id="left_col"> 
     ... 
    </div> 
    <div id="right_col"> 
     ... 
    </div> 
</div>

來源

2017-09-22 11:57:57 Altravista

相關問題

 相關問題