Как расположить плавающие элементы вертикально

0

У меня 3 поля.

То, что я хотел бы сделать, это макет: Изображение 174551

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

Он должен работать в разных разрешениях.

Есть ли простой способ? или мне нужно будет использовать javascript для динамического добавления в него маржинальной вершины?

код:

<div class="fieldSetsContainer">
<fieldset class="leftFieldSet">test
    <br/>test
    <br/>test
    <br/>test
    <br/>test
    <br/>test
    <br/>
</fieldset>
<div class="rightFieldSets">
    <fieldset>test2</fieldset>
    <fieldset class="bottomRightFieldSet">test3</fieldset>
</div>

CSS:

.rightFieldSets {
float:left;
width:34%;
}
.rightFieldSets fieldset {
clear:left;
width:89%;
}
.leftFieldSet {
width:62%;
float:left;
margin-right:1px;
}
.bottomRightFieldSet {
margin-top:6px;
}

вот ссылка: http://jsfiddle.net/bbryK/

  • 0
    Какие ограничения для Div? Являются ли ширины постоянными или текучими? может ли высота двух правых делителей быть выше, чем левых?
  • 0
    Можете ли вы поделиться скриптовой ссылкой
Показать ещё 2 комментария
Теги:
css-float

3 ответа

2
Лучший ответ

Мое решение предполагает две вещи:

  • Правая колонка имеет фиксированную ширину.
  • Левый столбец всегда должен быть самым высоким.

См. Http://jsfiddle.net/c3AFP/2/

Структура Html:

<div class="container">
    <div class="right">
        <fieldset class="top"></fieldset>
        <fieldset class="bottom"></fieldset>
    </div>
    <fieldset class="left"></fieldset>
</div>

Стили Css:

.container {
    position: relative;
}
.top, .bottom {
    width: 300px;
}
.left {
    margin-right: 300px;
}
.right {
    float: right;
    margin-left: 10px;
}
.bottom {
    position: absolute;
    bottom: 0;
}

РЕДАКТИРОВАТЬ:

Вот решение с правильной колонкой размером в процентах: http://jsfiddle.net/c3AFP/5/

EDIT 2:

Вот решение на основе таблицы, которое устраняет требование, чтобы левый столбец был самым высоким. Используя vertical-align вы можете отрегулировать, где меньшие элементы должны совпадать по отношению к самому высокому: http://jsfiddle.net/c3AFP/7/

  • 0
    Спасибо, это самое близкое решение. Однако нельзя ли это улучшить, чтобы вам не приходилось определять фиксированную ширину для правого столбца? Рациональным является поддержка нескольких разрешений экрана. И желательно изменение размера окна.
  • 0
    Добавлено решение с правым столбцом переменного размера, но теперь, когда я думаю об этом: почему бы вам не использовать таблицу? Это также должно устранить требование, чтобы левый столбец был самым высоким.
Показать ещё 2 комментария
1

Я даю вам начальную точку на скрипке. Пожалуйста, поиграйте, сделайте код и разделите его.

http://jsfiddle.net/vY462/

#one{width:200px;height:70px;border:2px solid black;float:left;}
#two,#three{width:200px;height:25px;border:2px solid black;float:right;margin-top:5px;}

<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
  • 0
    как это работает для разных размеров шрифта, что является требованием здесь, я считаю?
  • 0
    Вы нигде не упоминали требования к размеру шрифта. Пожалуйста, упомяните то же самое.
Показать ещё 4 комментария
0

Попробуй это

FIDDLE

#main {
    position: relative;
    height: 100px;
    width: 200px;
    background: gray;
    border: 5px solid black;
    display: inline-block;
}
#top {
    position: relative;
    height: 40px;
    width: 155px;
    background: gray;
    border: 5px solid black;
    display: inline-block;
    top: -60px;    
}
#bottom {
    position: relative;
    height: 40px;
    width: 155px;
    background: gray;
    border: 5px solid black;
    display: inline-block;
    left: -165px;
}
  • 0
    Спасибо, но высота не известна. Я также попытался добавить текст внутри левого div, и это приводит к исчезновению одного из div.
  • 0
    хорошо, это легко сделать, дайте мне несколько минут
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню