将盒子放在彼此旁边

Question

我有3个简单的盒子，我想彼此水平排列。但目前它们只是垂直堆叠在一起。我正在使用Twitter Boostrap以及'row'类。

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>

这就是他们目前的样子：picture

Answer 1

如果您打算使用Bootstrap，您将要删除设置的宽度并使用grid system使用Bootstrap水平堆叠它们：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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
  }

＆＃13;

＆＃13;

.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
       }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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