如何在一行中获得三个div

Question

我想在一行中对齐三个div，在第一个div和第二个div之间有一个小空格，并使用bootstrap在最后一个div，如图所示：

我尝试使用此代码：

    <div class="row">
                  <div class="col-md-2">
                     <img src="img/emo_positif.png')}}">
                   </div>
                   <div class="col-md-7">
                     <div class="square1"></div>

                   </div>
                   <div class="col-md-3">
                     <img src="img/emo_negative.png')}}">
                   </div>
</div>

但它显示了div之间的一个很大的空间

Answer 1

使用Bootstrap 3：

＆＃13;

＆＃13;

.row {
  height: 24px;
}
.row > div {
  height: 100%;
}
.square {
  background: pink;
}
.square1 {
  background: #01a8ff;
  height: 100%;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >

<div class="row">
  <div class="col-xs-2 square">
  </div>
  <div class="col-xs-8">
    <div class="square1"></div>
  </div>
  <div class="col-xs-2 square">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

检查Pen。 阅读docs。

Answer 2

使三个分区在同一条线上。有很多方法。为了更好的用户体验，在css中使用display:flex进行父部分

由于