Question

我正在尝试创建一个宽度仅为内容大小的容器div。我在容器上使用float: left使该部分正常工作。这是我到目前为止所拥有的。

HTML

<div class='container'>
    <div class='floater' style='background-color: #880000'>1</div>
    <div class='floater' style='background-color: #008800'>2</div>
    <div class='floater' style='background-color: #000088'>3</div>
</div>

CSS

.container {
background-color: #123456;
float: left;
}

.floater {
width: 300px;
height: 100px;
float: left;
}

我遇到的问题是当浮动div被包裹在容器内时。我确实希望它们换行，但我也希望容器div的宽度相应地调整大小。例如，如果您的浏览器宽度为1000px，则一切正常，容器为900px。但是如果你将浏览器缩小到750px宽，那么第3次潜水就会换到下一行，但容器的宽度是750px;不是我想要的600px。

我想要的行为可能吗？如果是这样，怎么样？

我为每个人做了一个小提琴，看看我在说什么Click Here

Answer 1

这是因为.container元素的宽度由页面宽度或包含元素决定。取决于浏览器，包含元素可以是或可以不是html元素。基本上你有.floater元素的固定宽度为300px x 100px（设置明确），并且.container元素的宽度和高度设置为implicity。尝试这样的事情。

.container {width: 90%;}

这将导致.container元素的宽度始终小于包含元素的宽度。因此，例如，如果包含元素是html，其宽度为1000px，则.containing元素的宽度将为1000px的90％，即900px。如果html元素是750px，则.container元素将是750px的90％，即675px。

此外，根据您在.container元素上方，下方和内部的内容，您可能会或可能不会遇到问题，因为您还没有清除浮动。试试这样的事情

.container {overflow: auto;}

Answer 2

嗯，我们遇到了同样的问题。我们专门为我们的浮动元素使用了jQuery masonry插件。

这http://masonry.desandro.com/demos/centered.html可以解决您的问题！

唯一的问题是，你必须使用这个插件。然后，如果你试图在没有固定宽度的容器中浮动元素，我们猜测你的布局会因这个插件而大大受益。

Answer 3

您需要清除浮子以使容器包裹。广告......

在最后一个浮动之后

<div style="clear:both"></div>或者为你添加一个clearfix ... ...

http://nicolasgallagher.com/micro-clearfix-hack/

并使用上面站点中的clearfix将容器上的类更改为class="container cf"

Answer 4

我为Instagram缩略图的图像库做了类似的事情，其中图像可能小于缩略图的大小但不大于缩略图，缩略图占据容器宽度的100％。这样可以使图像占据整个宽度而不会拉伸它们。

如果使用CSS预处理器，则可以毫不费力地获得该效果。如果你不使用CSS预处理器，那么将会有更多的努力。

Here is a CodePen example，其中包含指向另一个演示的链接。

基本上，神奇的部分是这个Stylus CSS：

floaterSize = 300px

.floater
  max-width floaterSize

for num in (1..10)
  @media screen and (min-width: floaterSize*num)
    .floater
      width unit(100/(num+1), '%')

它的作用是计算具有最大宽度限制的元素的理想宽度，然后在达到该限制时将另一个添加到行中，从而导致元素的流畅布局，其中每个元素不会跨越更大比指定的最大宽度（在这种情况下，floaterSize）。

前几个生成的看起来像这样：

@media screen and (min-width: 300px) {
  .floater {
    width: 50%;
  }
}
@media screen and (min-width: 600px) {
  .floater {
    width: 33.333333333333336%;
  }
}
@media screen and (min-width: 900px) {
  .floater {
    width: 25%;
  }
}

这是一种移动优先的方法。基本上，如果你的窗口是299像素或更低，你应该看到1个块，但如果它是599像素或更少，那将容纳2个块，而899像素将容纳3个块等，直到你不想更高在屏幕宽度。提供的Stylus将编写10个媒体查询，最多@media screen and (min-width: 3000px)。

Stylus代码提供的整个生成的CSS可以在下面看到。

@media screen and (min-width: 300px) {
  .floater {
    width: 50%;
  }
}
@media screen and (min-width: 600px) {
  .floater {
    width: 33.333333333333336%;
  }
}
@media screen and (min-width: 900px) {
  .floater {
    width: 25%;
  }
}
@media screen and (min-width: 1200px) {
  .floater {
    width: 20%;
  }
}
@media screen and (min-width: 1500px) {
  .floater {
    width: 16.666666666666668%;
  }
}
@media screen and (min-width: 1800px) {
  .floater {
    width: 14.285714285714286%;
  }
}
@media screen and (min-width: 2100px) {
  .floater {
    width: 12.5%;
  }
}
@media screen and (min-width: 2400px) {
  .floater {
    width: 11.11111111111111%;
  }
}
@media screen and (min-width: 2700px) {
  .floater {
    width: 10%;
  }
}
@media screen and (min-width: 3000px) {
  .floater {
    width: 9.090909090909092%;
  }
}

DIV容器大小与包装浮动内容的宽度

4 个答案: