Как я могу преобразовать это статическое выравнивание элементов div и т. Д., Чтобы они всегда были динамически выровнены (то есть были эластичными) - HTML, CSS3

Question

Вот демонстрационная версия JSFiddle .

Я использую платформу Twitter Bootstrap - http://twitter.github.com/bootstrap/

То, что вы увидите в таблице стилей (в JSFiddle):вверху находятся соответствующие классы из Bootstrap, но внизу мои.

В JSFiddle почему-то все выглядит не так, как я хочу (думаю, это может быть из-застатические значения и меньшее окно в JSFiddle).

Вот как это выглядит в моем приложении:

Однако проблема в том, что он работает, когда яукажите конкретную ширину (в пикселях) для всего.

Я хочу, чтобы макет оставался неизменным независимо от размера окна браузера (изображение не должно автоматически изменяться, хотя, если этоможет быть достигнуто без JS, что было бы круто).Таким образом, теоретически макет не сломался бы, если бы я взял его в JSFiddle.

Есть идеи?

Answer 1

Вы можете сделать это:

Сначала , избавьтесь от min-width, установленного в Twitter css

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/