并排的两个流体 div答案

【问题标题】：two fluid divs side by side并排的两个流体 div
【发布时间】：2013-01-04 18:00:12
【问题描述】：

我正在尝试并排对齐 2 个流体 div，这是一个预览http://jsfiddle.net/238ha/ 现在的样子。我想要做的是有两个 div

这是当前代码

.images {
  border: 1px solid red;
  position:absolute;
  top:40px;
  left:0px;
  float:left;
  width: 25%;
  min-width: 305px;
  height: 95%;
}
.content {
  border: 1px solid blue;
  position:absolute;
  top:40px;
  left: 25%;
  width:70%;
  min-width: 60%;
  height: 95%;
}

这是我想要完成的事情

图片：占据屏幕的 25%

内容：占据屏幕的 75%

但是，当用户调整屏幕大小时，div 可以变大，但它们可以变小却有限制。我读过关于 flexboxes 的文章，我认为它们可能会起作用，但它们仍然不能很好地支持它们，而且我无法成功使用“flex-flow:row”。我也在网站上使用了很多引导程序，所以如果你知道如何做到这一点，那么引导程序会更好。我感谢你的帮助。

【问题讨论】：

您在px 中设置了一个min-width，它不是流动的。为什么不将.images 元素内的图像设置为width: 100%; height: auto; 并缩放图像，然后删除min-width。您还使用了position: absolute 和float: left，您不需要两者，您可以使用float: left 并删除您的top 和left 行。记得将float: left 添加到 .content 类中。
@james 我想要做的是混合流体和非流体，我想要两个 div 宽度的总和 = 100%，但是当用户调整他们的屏幕大小时，我想要 div有一个固定的大小。
那时你可能会想看看响应式设计。对最小宽度以上的任何内容使用流体布局，对以下内容使用固定布局。您应该查看media queries 以获得一些帮助。
感谢媒体查询完美运行，如果您可以发布该评论作为答案，我将接受它。再次感谢

标签： jquery css html twitter-bootstrap flexbox

【解决方案1】：

您可能会想了解响应式设计。对最小宽度以上的任何内容使用流体布局，对以下内容使用固定布局。您应该查看media queries 以获得一些帮助。

【讨论】：

【解决方案2】：

如果一个 div 有 "float:left" 来连接另一个 div，你也必须在它的规则中设置 "float:left"。因为如果没有
它们在同一行，所以第一个在左边，第二个做同样的事情，但它发现在左边第一个所以它会这样。

【讨论】：