Question

我正在使用bootstrap，我在bootstrap容器中有两个容器。像这样：

        <div class="container">
            <div id="container-map">
                aasdasd
            </div>
            <div id="container-buttons">
                asdasda
            </div>
        </div>

我要做的是在主容器内并排放置两个div，＃container-map 和＃container-buttons 。

这是我对两个div的自定义CSS：

#container-map,
#container-buttons {
    display: inline-block;
    margin: 0 auto 0 auto;
    width: 500px;
    height: 500px;
}

Answer 1

您是否有理由不想使用内置于网格系统中的bootstrap？像这样的东西？

<div class="container">
    <div class="row">
        <div class="col-md-3 col-md-offset-3">
            <div class="container-map">
                asdf
            </div>
         </div>
         <div class="col-md-3">
             <div class="container-buttons">
                  asdf
              </div>
         </div>
    </div>
</div>

Answer 2

只需将CSS更改为此

即可

#container-map,
#container-buttons {
   float: left;
   margin-left: auto;
}

两个容器都将居中并排

Answer 3

您可以尝试使用此示例中的代码（在.container text-align: center;上使用display:inline-block;作为div）。

<style>
.container {
  position:relative;
  text-align:center;
}
#dv1, #dv2 {
  display:inline-block;
  width:100px;
  margin:0 3px;
  background:#33f;
}
</style>

<div class="container">
  <div id="dv1">Div 1</div>
  <div id="dv2">Div 2</div>
</div>

Answer 4

使用flex使两个div的高度相等。您可以参考该链接以找到支持该链接的浏览器。看看这个：

.container {
  display: flex;
  width: 400px;
  background: #eee;
}

.column {
  flex: 1;
  background: #fff;
  border: 1px solid #ccc;
  margin: 1px;
}

<div class="container">
  <div class="column">
    <p>aasdasd</p>
  </div>
  <div class="column">
    <p>asdasda</p>
    <p>asdasda</p>
  </div>
</div>

如何将两个div并排？

4 个答案: