CSS3和HTML5中的列

Question

我试图打破我的成对的列之间的界限，确实遇到了一些麻烦。 我希望第一栏位于页面中心，第二小栏位于页面右侧。

在这对列下面将重复此操作。

<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%;
}

Answer 1

使用清除左

 .column1of2 {clear:left}

Answer 2

这可以通过使用一个div既包含divs column1of2和column2of2的div来实现，在其中我们可以将margin：0px auto与float：left一起提供给column1of2，对于column2of2我们可以给float：right和margin-left：5％ ; 关闭column2of2的div之后，我们可以添加另一个div，然后关闭div“ row_holder”，并将该类的CSS清除为.clear {clear：both;}。

CSS3和HTML5中的列

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-03-16 13:06:40

解决方案2
1 2013-03-16 14:01:05

CSS3和HTML5中的列

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-03-16 13:06:40

解决方案2 1 2013-03-16 14:01:05

解决方案1
2 已采纳 2013-03-16 13:06:40

解决方案2
1 2013-03-16 14:01:05