html - 如何将 div 等的这种静态对齐方式转换为始终动态对齐(即 flex )- HTML、CSS3

Question

这是关于 JSFiddle 的演示.

我正在使用 Twitter 的 Bootstrap 框架 - http://twitter.github.com/bootstrap/

您将在样式表(在 JSFiddle 上)中看到的顶部是来自 Bootstrap 的相应类，但底部是我的。

在 JSFiddle 上，出于某种原因，一切看起来都不像我想要的那样(我认为这可能是因为 JSFiddle 上的静态值和较小的窗口)。

这是它在我的应用中的样子:

但是，问题是当我为所有内容指定特定宽度(以像素为单位)时它会起作用。

我想要发生的是，无论浏览器窗口的大小如何，布局都保持不变(图像不必自动调整大小，但如果可以在没有 JS 的情况下实现那会很酷)。因此，理论上，一旦我将其放入 JSFiddle 中，布局就不会被破坏。

有什么想法吗？

Answer 1

你可以这样做:

首先，去掉 Twitter css 中设置的 min-width

div.container-fluid {
    float: bottom;
    padding: 0px;
    min-width:0;    /* add this */    
}

其次，给.content div一个流畅的width

div.container-fluid .content {
    border: 1px black solid;
    margin: 0px;
    width: 80%;   /* adjust this */
    float: left;
    padding: 10px;
}

第三， float 表单中的元素

div.row.profile_pic div.span5 {
    width: 120px;
    float:left;
    margin-right:1em;
}

div.span7{
    width:40%;
    float:left;    
}

当然，您需要调整这些值。我只是随机选择了一些#s。

示例: http://jsfiddle.net/ytSjc/1/