Question

我有两列div，我希望显示为this。

<div id="cont">
    <div class="left">
        <div id="d1">1left</div>
        <div id="d3">3left</div>
        <div id="d5">5left</div>
    </div>
    <div class="right">
        <div id="d4">4right</div>
        <div id="d2">2right</div>
        <div id="d6">6right</div>
    </div>
</div>

但是，为了创建响应式设计，我不想使用容器，我宁愿不使用JS进行基本格式化。

问题在于，只需左右浮动容器即可创建＆＃34;行，＆＃34;你可以看到here（由于1英尺的大小增加，3英尺被推右）。

是否可以在不使用容器或JS的情况下创建多个div的列，如果是，如何创建？

Answer 1

以下是我的尝试：

.left {
    float:left;
    width: 185px;
    clear:both;
}
.right {
    margin-left:185px;
}

基本上，无论您为width设置了.left，请将其用于margin-left中的.right。这样您就不必在float上使用div属性。

更新＃1

在.left中，添加：

clear:both;

<强> JSFiddle Demo

更新＃2

对于左列中的额外空格（如果右侧的其他列较大），请使用：

margin-top:-50px; // (Other columns height minus the shorter left column's height.)

在高度较短的一列左下方。

<强> JSFiddle Demo

Answer 2

我建议使用Bootstrap（http://getbootstrap.com/）并创建你的＆＃34;网格＆＃34;像：

<div class="container-fluid">

      <!-- left column -->
      <div class="col-md-6">

      </div>
      <!-- right column -->
      <div class="col-md-6">

      </div>
</div>

使用Bootstrap，您可以通过添加一些CSS类为不同的设备大小指定不同的布局。例如，如果您希望在大屏幕中有两列，而在移动设备中只有一列，则可以添加以下类：

<div class="container-fluid">

      <!-- left column in medium screens and up -->
      <!-- just one column in small screens -->
      <div class="col-xs-12 col-md-6">

      </div>
      <!-- right column in medium screens and up -->
      <!-- just one column in small screens -->
      <div class="col-xs-12 col-md-6">

      </div>
</div>

<强>样本： http://www.bootply.com/f1zspwlokR

可以在没有容器或JS的情况下创建具有多个元素的两列吗？

2 个答案: