Question

我正在试图找出创建一个三个方框（列）的最佳方法，在方框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

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

Answer 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;
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>

Answer 3

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

使用CSS创建三个框，在每个框中居中使用分隔符和文本

3 个答案: