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

#html #css

#HTML #css

Вопрос:

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

Я использую фреймворк начальной загрузки Twitter — http://twitter.github.com/bootstrap /

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

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

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

Идеальное статическое выравнивание

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

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

Есть идеи?

1. Вы хотите, чтобы элементы сохраняли свою ширину в пикселях при изменении размера окна, или вы хотите, чтобы макет уменьшался вместе с окном?

2. Я хочу, чтобы макет уменьшался (пропорционально) вместе с окном.

Ответ №1:

Вы могли бы сделать это:

Во-первых, избавьтесь от min-width того, что установлено в css Twitter

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

Во-вторых, дайте .content div a fluid 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;    
}

Конечно, вам нужно будет настроить значения. Я просто выбрал несколько случайных #.

Пример: http://jsfiddle.net/ytSjc/1/