Question

我用css + html制作这个3盒子 - ＆gt; http://i.imgur.com/6kTAuuI.png

代码：

                <div class="row">
                    <div class=".col-md-6">
                        <div class="box">OPEN BAR + DRINKING GAMES</div><span></span>
                        <div class="box">CONHECER VÁRIOS BARES E BALADAS EM UMA DAS MAIORES CIDADES DO MUNDO</div><span></span>
                        <div class="box">CONHECER PESSOAS</div><span></span>
                    </div>
                </div>


#about .box {
  background-color: transparent;
  border: 1px solid white;
  width: 250px;
  height: 350px;
  display: inline-block;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-right: 20px;
}

我想知道为什么中间盒比其他盒子更高。

更新：

知道我正在使用正确的网格系统：

                <div class="row">
                     <div class="col-md-4 box">OPEN BAR + DRINKING GAMES</div>
                     <div class="col-md-4 box">CONHECER VÁRIOS BARES E BALADAS EM UMA DAS MAIORES CIDADES DO MUNDO</div>
                     <div class="col-md-4 box">CONHECER PESSOAS</div>
                 </div>

和

#about .box {
  background-color: transparent;
  border: 1px solid white;
  width: 250px;
  height: 350px;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-right: 140px;
}

但它尚未集中

- ＆GT; http://i.imgur.com/mc99Oxo.png

Answer 1

如果你有display：inline-block;盒子将垂直对齐基线。有关详细信息，请参阅http://quirksmode.org/css/css2/display.html#inlineblock。

从你的代码中我猜你正在使用bootstrap。使用bootstraps网格：

           <div class="row">
                <div class="col-md-4 box">OPEN BAR + DRINKING GAMES</div>
                <div class="col-md-4 box">CONHECER VÁRIOS BARES E BALADAS EM UMA DAS MAIORES CIDADES DO MUNDO</div>
                <div class="col-md-4 box">CONHECER PESSOAS</div>
            </div>

.box {
  background-color: transparent;
  border: 1px solid white;
  height: 350px;
  margin-top: 50px;
  margin-bottom: 50px;
}

更新

将你的.row div包装到另一个带有“容器”类的地方，以便在它的中心位置。阅读bootstrap文档以获取更多信息：http://getbootstrap.com/css/#grid

使3箱集中

1 个答案: