0

我试图找出创建一行三个框（列）的最佳方法，在框 1 和 2 以及框 2 和 3 之间有分隔线（垂直线）。文本需要在每个框内居中。

CSS

h2 {
    color: #00ADEF;
    margin-top:0;
    margin-bottom:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:20px;
    font-weight:bold;
    line-height:23px;
}

p {
    margin-top:0;
}

.3colwrapper {
    width: 930px;
    margin: 0 auto;
}

.colbox {
    float:left;
    margin: 10px;
    width: 210px;
    background:#DDD;
    padding:10px 40px;
}

标记

<div class="3colwrapper">
    <div class="colbox"><h2>Step One</h2>
        <p>Sign up</p>
    </div>
    <div class="colbox"><h2>Step Two</h2>
        <p>Verify</p>
    </div>
    <div class="colbox"><h2>Step Three</h2>
        <p>Participate</p>
    </div>        
</div>

这是我到目前为止所做的工作：http: //cssdesk.com/YyjAr

4

3 回答 3

2 
 h2 {
color: #00ADEF;
margin-top: 0;
margin-bottom: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
/* [disabled]line-height:23px; */
}

p {

margin-top:0;
}

.3colwrapper {
    width: 930px;
    margin: 0 auto;
}

.colbox {
float: left;
width: 210px;
background: #DDD;
border-right-width: medium;
border-right-style: solid;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 40px;
}
 p {
 text-align: center;
 }

<html>
<body>
<div class="3colwrapper">
<div class="colbox"><h2>Step One</h2>
<p>Sign up</p>
</div>
<div class="colbox"><h2>Step Two</h2>
<p>Verify</p>
</div>
<div class="colbox"><h2>Step Three</h2>
<p>Participate</p>
</div>        
</div>
</body>
</html>
于 2012-06-24T09:36:50.530 回答
1 
  h2 {
color: #00ADEF;
margin-top: 0;
margin-bottom: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
/* [disabled]line-height:23px; */
   }


p {
 margin-top:0;
}

.3colwrapper {
    width: 930px;
    margin: 0 auto;
}

.colbox {
float: left;
width: 210px;
background: #DDD;
border-right-width: medium;
border-right-style: solid;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 40px;
border-right-color: #000;
}

.colbox1 {
float: left;
width: 210px;
background: #DDD;
border-right-width: medium;
border-right-style: solid;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 40px;
border-right-color: #000;
}

.colbox2 {
float: left;
width: 210px;
background: #DDD;

margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 40px;
border-right-color: #000;
  }
p {
text-align: center;
  }
</style>
</head>



<body>
<div class="3colwrapper">
  <div class="colbox"><h2>Step One</h2>
 <p>Sign up</p>
  </div>

 <div class="colbox1"><h2>Step Two</h2>
 <p>Verify</p>
</div>
<div class="colbox2"><h2>Step Three</h2>
<p>Participate</p>
</div>        
</div>
</body>
</html>
于 2012-06-24T10:03:12.047 回答
0

http://cssdesk.com/MZJ7f这是你想要的吗？

于 2012-06-24T09:20:45.627 回答