Question

我使用div来布局页面。该页面有两列。第一列是地图。第二列包含三行图形。我使用下面的代码。结果只给了我一行（而不是两列）有四行。我做错了什么？

<!-- This is where the map will live -->    
<div id="map-container" style="width:1000px; height:500px"></div>

<!-- CHARTS!!! -->

<div class="row">

    <!-- row chart -->
    <div class="col-md-1">
        <div id="rowchart2" class="dc-chart"></div>
        <center><div class="title">Severity</div></center>
    </div>

    <!-- Histogram-->
    <div class="col-md-2 col-md-offset-1">
        <div id="rowchart" class="dc-chart"></div>
        <center><div class="title">Histogram(Delta Speed)</div></center>
    </div>

    <!-- row chart -->
    <div class="col-md-4 col-md-offset-0">
        <div id="rowchart3" class="dc-chart"></div>
        <center><div class="title">Direction</div></center>     
    </div>                  
</div>

Answer 1

假设您在此处使用Bootstrap，则需要在一行内布置两列，以便它们并排放置。例如，如果要使两个宽度相等的列，可以使用：

<div class="row">
    <div class="col-md-6">
        <!-- Map Here -->
    </div>
    <div class=col-md-6">
        <div>Chart 1</div>
        <div>Chart 2</div>
        <div>Chart 3</div>
    </div>
</div>

连续总共有12列，所以使用＆＃34; col-md-6＆＃34;对于每列，会产生两个大小相等的列。

在第二列中，您可以嵌套更多行和列以提供更多控制：

<div class="row">
    <div class="col-md-6">
        <!-- Map Here -->
    </div>
    <div class=col-md-6">
        <div class="row">
            <div class="col-md-12">Big Chart 1</div>
        </div>
        <div class="row">
            <div class="col-md-6">Small Chart 2</div>
            <div class="col-md-6">Small Chart 3</div>
        </div>
    </div>
</div>

对于示例布局，这里是一个JSFiddle：http://jsfiddle.net/q3vdex96/2/

在您的示例中，您将地图设置为宽度为1000像素。您不应该以这种方式设置显式宽度 - 让Bootstrap使用其网格系统处理大小调整。 Bootstrap的响应式CSS意味着您的图表和地图将在一个小屏幕上折叠成一列，并随着屏幕尺寸的增加自动扩展到正确的布局。

Answer 2

<div class="row">

    <div class="col-md-12">
        <div class="col-md-6">
            Column 1:


            <div id="map-container" class="col-md-12" style="width:100%; height:500px"></div>


        </div>

        <div class="col-md-6">


            OTHER DATA HERE

        </div>
    </div>


</div>

Answer 3

你没有展示你的CSS，所以我所说的只是一个疯狂的猜测。

首先，中心元素已过时。不要使用它。

其次，div元素是块级别，默认情况下会扩展页面的整个宽度。这就是为什么你只得到一个列，但正如我所说，没有链接或jsfiddle与完整的标记，这是所有的猜测。

如何使用div来布局页面

3 个答案: