Question

我有一个流畅的布局。当布局足够宽时，一些div（.one和.two）都可以在一条线上水平排列。

当布局被挤压时，最终右浮动的div（.two）最终会出现在多条线上。有没有一种方法（没有基于宽度的媒体查询）当左侧浮动的div不能全部放入一条线时，可以将左侧浮动的div清除到它们自己的行上。我想我需要明确.cont2。

下面是我的代码，是我试图实现的图像。

<div class="cont">

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

 <div class="cont2">
   <div class="two"></div>
   <div class="two"></div>
   <div class="two"></div>
 </div>

</div>

.cont {
  background: blue;
  width: 40%;
  margin: auto;
  overflow: auto;
}
.one {
  background: red;
  height: 100px;
  width: 300px;
  float: left;
}
.two {
  float: right;
  border: 1px solid black;
  height: 100px;
  width: 100px;
  background: white
}

enter image description here

Answer 1

你可以尝试：

.cont2 {
  float: left;
  overflow: auto;
}

请参阅示例：http://codepen.io/anon/pen/kczux

Answer 2

使它们一起进入下一行（而不是一个一个），你可以在cont2元素上使用float。但是为了使它向左浮动而不是向右浮动，我认为你需要媒体查询。

http://codepen.io/anon/pen/Jbjmp

Answer 3

只需添加到您的CSS：.cont2 {float：right; }

它将使你的cont2 div与他的所有子div一起向右移动，当你调整屏幕大小时，它将转到新行。对于较低分辨率，您需要媒体查询

Answer 4

您可以使用媒体查询，这是我的看法： http://jsfiddle.net/S4R6h/

您可以在此处阅读一些有关如何根据尺寸定位各种设备的信息：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

让小提琴窗口非常宽，当你的代码很好地排成一行时，你会看到你得到了什么。然后收缩窗口，媒体查询开始进行，为了显示你，身体会变黑。

HTML：

<div class="cont">

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

 <div class="cont2">
   <div class="two"></div>
   <div class="two"></div>
   <div class="two"></div>
 </div>

</div>

CSS：

.cont {
  background: blue;
  width: 40%;
  margin: auto;
  overflow: auto;
}
.one {
  background: red;
  height: 100px;
  width: 300px;
  float: left;
}
.two {
  float: right;
  border: 1px solid black;
  height: 100px;
  width: 100px;
  background: white
}

@media only screen 
and (max-width : 1530px) {
/* Styles */
    /* when the query kicks in we decend into night */
    body{
        background: #000;
    }
    .one {
      background: red;
      width: 100%;
    }    
    .two{
        width: 33.333%;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    }
}

Answer 5

使用媒体查询这很容易，我建议检查一下。但如果您不愿意使用它们，您可以执行以下操作：

将display：inline-block添加到.cont2

.cont2 {
    display: inline-block;
}

从.one中删除float：left而不是添加display：inline-block;太。所以.one看起来像

.one {
    background: red;
    height: 100px;
    width: 300px;
    display:inline-block;
}

那样.cont2 div会在没有空间的情况下与左边对齐。它与.one在同一条线上。

这是一个codepen：http://codepen.io/anon/pen/qLljt

当内容不能放在一行时，使容器div清晰吗？

5 个答案: