0

ボックス1と2、およびボックス2と3の間に仕切り（垂直線）がある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 に答える