У меня 3 поля.
То, что я хотел бы сделать, это макет:
Я хочу, чтобы нижний правый диапазон был выровнен по нижнему краю, поэтому нижняя часть будет выровнена с левым набором полей.
Он должен работать в разных разрешениях.
Есть ли простой способ? или мне нужно будет использовать 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/
Мое решение предполагает две вещи:
См. 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/
Я даю вам начальную точку на скрипке. Пожалуйста, поиграйте, сделайте код и разделите его.
#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>
Попробуй это
#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;
}