CSS3和HTML5中的列

我試圖打破我的列對之間的界限，確實遇到了一些麻煩。我希望第一列居中在頁面上，第二列在右側。CSS3和HTML5中的列

這將在這對列下重複。

<html> 

<head> 
     <title>Choose to Give</title> 
     <link rel="stylesheet" type="text/css" href="web.css" /> 
</head> 


<body> 

<ul class="nav"> 
    <li><a href="/home/">Home</a></li> 
    <li><a href="/about_us/">About</a></li> 
    <li><a href="/foundations/">Foundations</a></li> 
    <li><a href="/forums/">Forums</a></li> 
    <li><a href="/contact/">Contact</a></li> 
</ul> 



<div class="column1of2"> 
<h2> 
Do something that matters. 
blah blah 
</h2> 
</div> 


<div class="column2of2"> 
<h2> 
Top user contributions. 
</h2> 
</div> 

<br> 

<div class="column1of2"> 
<h2> 
Random title here 
blah blah 
</h2> 
</div> 


<div class="column2of2"> 
<h2> 
Top company contributions. 
</h2> 
</div> 


</body> 


</html>

然後CSS。

body { 
     background-color:#66FF33; 
     font-size: 8pt; 
     color: black; 
     text-align: left; 
} 




.nav{ 
     border:10px solid black; 
     background-color: white; 
     border-width:10px 0; 
     list-style:none; 
     padding:0; 
     margin-top: 10%; 
     text-align:center; 
     font-size: 12pt; 
} 
.nav li{ 
     display:inline; 
} 
.nav a{ 
     display:inline-block; 
     padding:10px; 
} 


h1 { 
     text-align: left; 
     color: black; 
     background-color: white; 
     padding: 30px; 
     border-style: solid; 
     border-width: 10px; 
     border-left-width: 10px; 
     border-right-width: 10px; 
     border-color: black; 
     border-radius: 5px; 

} 


h2 { 
     text-align: left; 
     color: black; 
     background-color: white; 
     padding: 30px; 
     border-style: solid; 
     border-width: 10px; 
     border-left-width: 10px; 
     border-right-width: 10px; 
     border-color: black; 
     border-radius: 5px; 

} 

.column1of2 { 
float: left; 
width: 30%; 
left-margin: 10%; 
} 

.column2of2 { 
float: right; 
width: 15%; 
right-margin: 2%; 
}

來源

2013-03-16 Juddles

你的頁面上有四列。那麼你在談論哪兩列呢？ – Sachin 2013-03-16 12:57:57

使用明確的左邊爲

.column1of2 {clear:left}

來源

2013-03-16 13:06:40

這可以使用它同時擁有的div column1of2和column2of2在這一個div唐凡在我們可以給保證金：0px auto的與沿column1of2 float：left和column2of2我們可以給float：right和margin-left：5％;在關閉column2of2的div後，我們可以添加另一個div，然後關閉div「row_holder」，並將該類的css清除爲.clear {clear：both;}。

來源

2013-03-16 14:01:05 Vish

CSS3和HTML5中的列

回答

相關問題