對齊框彼此相鄰

Question

我有3個簡單的盒子，我想彼此水平對齊。 但是目前它們只是垂直堆疊在一起。 我還在'row'類中使用Twitter Boostrap。

HTML：

 .img-box-kai { width: 300px; height: 450px; border: 3px solid red; } .img-box-lucas { width: 300px; height: 450px; border: 3px solid red; } .img-box-bryant { width: 300px; height: 450px; border: 3px solid red; } 

 <div class="container"> <div class="row"> <div class="img-box-kai">Rectangle Test</div> <div class="img-box-lucas">Rectangle Test</div> <div class="img-box-bryant">Rectangle Test</div> </div> </div> 

這是他們當前的樣子： 圖片

Answer 1

如果打算使用Bootstrap，則需要刪除設置的寬度，並使用網格系統通過Bootstrap將其水平堆疊：

 .img-box-kai { height: 450px; border: 3px solid red; } .img-box-lucas { height: 450px; border: 3px solid red; } .img-box-bryant { height: 450px; border: 3px solid red; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-xs-4 img-box-kai">Rectangle Test</div> <div class="col-xs-4 img-box-lucas">Rectangle Test</div> <div class="col-xs-4 img-box-bryant">Rectangle Test</div> </div> </div> 

Answer 2

使用display: flex在.row ，例如：

.row {
  display: flex;
}

看看下面的代碼片段：

 .img-box-kai { width: 300px; height: 450px; border: 3px solid red; } .img-box-lucas { width: 300px; height: 450px; border: 3px solid red; } .img-box-bryant { width: 300px; height: 450px; border: 3px solid red; } .row { display: flex; justify-content: center; /* Aligning Horizontally */ } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="img-box-kai">Rectangle Test</div> <div class="img-box-lucas">Rectangle Test</div> <div class="img-box-bryant">Rectangle Test</div> </div> </div> 

希望這可以幫助！

Answer 3

您需要為每個控件添加float：left。 喜歡

  .img-box-kai {
    width: 300px;
    height: 450px;
    float:left;
    border: 3px solid red;
}

.img-box-lucas {
    width: 300px;
    height: 450px;
    float:left;
    border: 3px solid red;
}

.img-box-bryant {
    width: 300px;
    height: 450px;
    float:left;
    border: 3px solid red;
}

Answer 4

您可以添加此代碼，並且可以使用。

.row{
  display: flex;
  flex-direction: row
  }

 .img-box-kai { width: 300px; height: 450px; border: 3px solid red; } .img-box-lucas { width: 300px; height: 450px; border: 3px solid red; } .img-box-bryant { width: 300px; height: 450px; border: 3px solid red; } .row{ display: flex; flex-direction: row } 

  <div class="container"> <div class="row"> <div class="img-box-kai">Rectangle Test</div> <div class="img-box-lucas">Rectangle Test</div> <div class="img-box-bryant">Rectangle Test</div> </div> </div> 

Answer 5

您需要對它們每個都使用Bootstrap類。 喜歡

HTML：

<div class="container">
  <div class="row">
    <div class="img-box-kai col-md-4 pull-left">Rectangle Test</div>
    <div class="img-box-lucas col-md-4 pull-left">Rectangle Test</div>
    <div class="img-box-bryant col-md-4 pull-left">Rectangle Test</div>
  </div>
</div>

CSS：

.img-box-kai {
    min-height: 450px;
    border: 3px solid red;
}

.img-box-lucas {
    min-height: 450px;
    border: 3px solid red;
}

.img-box-bryant {
    min-height: 450px;
    border: 3px solid red;
}