Question

所以我无法将两个div side和map放在一起。我目前有：

CSS

.col-md-8 { float: right; clear: right;}
.col-md-4 { float: left; clear: left; }

HTML

<div class='container-fluid'>
    <div class='row'>
        <div style="width: 700px;" class='col-md-4' id="side">
        </div>

        <div class='col-md-8' id="try">
            <div id="map" style="width: 1000px; height: 800px">
            </div>
        </div>
    </div>
</div>

基本上，我希望div #side和#map彼此相邻......所以在这种情况下我不会放#side和#try并排？所以我用CSS float: right和float: left尝试了这个？我只是无法弄清楚什么是错的。任何帮助将不胜感激，谢谢！

Answer 1

您正在混合使用几种不同的样式属性。

您已定义CSS classes，但正在尝试使用它们定位Element Id attribute。

.try { float: right;}
.side { float: left; }

您可以更改CSS以定位元素Id。

#try { float: right;}
#side { float: left; }

您还在使用引导类，并专门为响应式布局选择了一个（使用container-fluid类）。通过将div定义为row并给出div列类中的元素，它们将根据总共12列进行适当浮动。

最后，你通过在div上设置显式宽度来反驳bootstrap类。你可以有1个或者另一个。你不应该同时做这两件事。

在您决定使用引导程序或使用硬编码宽度之前，它将无法正确布局。

Answer 2

在您的示例中，您将#map放在#try - div中，因此无法将它们彼此相邻浮动。

您的代码可能如下所示：

＆＃13;

#side,
#map {
  float: left;
  background: green;
  border: 10px solid black;
  width: 50px;
  height: 50px;
}

＆＃13;

<div>

    <div>

        <div id="side">
        </div>

        <div id="try">
            <div id="map">
            </div>
        </div>

    </div>
</div>

＆＃13;

我删除了#map上的style-attribute并添加了背景，边框，宽度和高度，仅显示它有效。

对于bootstrap-classes的使用，请看whipdancers的答案！

Answer 3

第一个问题是你正在与网格作战。只要你不超过容器的宽度（在这种情况下，你看到你正在使用引导程序），两个div将自动显示内联块。如果你确实超过了这个宽度，它们会堆叠起来。

那就是说 - 如果你把网格打破了方程式（不要在响应列上放置固定的宽度） - 将divs并排使用：

<强> HTML

<div class="container">
    <div class = "one"></div>
    <div class = "two"></div>
</div>

<强> CSS

.container div {
  display: inline-block;
}

如何并排div？

3 个答案: