| |
 31.1 Кб |
|
| | Всем привет. Не могу придумать как сделать, чтобы цены и корзина становились по вертикали в центре 3-го блока.
1 - макет резина - 3-х блочный, фикс/тянучка/фикс
3 - первых 2 блока заполнены неплохо
Как мне относительно тех 2-х блоков их высот выставить в третьем блоке нужные элементы по вертикали? Прилагаю исходник. Прилагаю картинку как есть и как надо, чтобы было.
Кроссбраузерность ИЕ6-8, Опера с 9.25, ФФ и Хром.
П.С. Фикс. высоту не предлагать.
.box_100proc{
width:100%;
display:inline-block;
}
.box_pp_block {
border-left: 341px solid transparent;
border-right: 140px solid transparent;
height: 1%;
}
* html .box_pp_block {
border-color:white;
filter: chroma(color=white);
}
.box_pp_block:after{
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.box_pp_content {
width: 100%;
float: left;
overflow: hidden;
margin-right: -100%;
position: relative;
}
.box_pp_content_desc{
text-align:justify;
padding:0 5px;
}
.left_pp_content {
float: left;
width: 341px;
margin-left: -341px;
position: relative;
}
.left_pp_content img{
float:left;
}
.box_pp_content_info{
float:left;
margin-left:10px;
width:231px;
}
.box_block{
margin-bottom:10px;
display:inline-block;
}
.box_block_end{
display:inline-block;
}
.valume_name{
width:126px;
float:left;
}
.valume_name span{
font-weight:bold;
color:#777777;
white-space:nowrap;
}
.valume{
width:100px;
float:left;
margin-left:5px;
}
.right_pp_content {
float: right;
margin-right: -140px;
width: 140px;
position: relative;
}
.box_action_price{
width:106px;
text-align:right;
float:left;
}
.action_price{
color:#993300;
font-weight:bold;
font-size:13px;
margin-right:5px;
}
.basket{
background:url(/images/addtobasket.gif) no-repeat;
width:32px;
height:32px;
cursor:pointer;
float:right;
}
|
<div class="box_100proc">
<div class="box_pp_block">
<div class="box_pp_content">
<div class="box_pp_content_desc">text text text text text text text text text text text text text text</div>
</div>
<div class="left_pp_content">
<img width="100" height="100" border="0" alt="" src="/images/no_photo_100.gif" />
<div class="box_pp_content_info">
<div class="box_block">
<div class="valume_name"><span>Год выпуска:</span></div>
<div class="valume">2002</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Пробег, тыс.км.:</span></div>
<div class="valume">100 000</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Моточасы, тыс.час.:</span></div>
<div class="valume">450 000</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Налёт, тыс.час.:</span></div>
<div class="valume">500 000</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Двигатель, см.куб.:</span></div>
<div class="valume">142</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Мощность, л.с.:</span></div>
<div class="valume">106</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Вид топлива:</span></div>
<div class="valume">Бензин</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Макс. скорость, км/ч:</span></div>
<div class="valume">250</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Расход, л./100км.:</span></div>
<div class="valume">20</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Объём бака, л.:</span></div>
<div class="valume">100</div>
</div>
<div class="box_block_end">
<div class="valume_name"><span>Дата обновления:</span></div>
<div class="valume">14.04.11 17:44</div>
</div>
</div>
</div>
<div class="right_pp_content">
<div class="box_action_price">
<div class="action_price">1 000 000 грн</div>
<div class="action_price">5 000 €</div>
</div>
<div title="Добавить в корзину" class="basket"></div>
</div>
</div>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: TetRiska
(15.04.2011 в 00:55)
| | | к сожалению, я не спец в верстке. задача интересная, но она на блоках, и ещё, какие-то непонятные для меня техники с
border-left: 341px solid transparent;
border-right: 140px solid transparent;
|
почему вы не хотите попробовать display:table-cell?а потом vertical-align:middle? но для такого типа отображения нужно будет избавляться от некоторых структур, вроде вышеуказанных. Они же у Вас, наверняка, как-то привязаны к общей структуре? | |
| |
|
|
| |
|
|
| |
для: dimon
(15.04.2011 в 09:34)
| | | Это один из методов 3-х колоночной резиновой верстки дивами, который кроссбраузерный.
display:table-cell и vertical-align:middle сработают в том случае если есть фикс высота и не сработают для ИЕ6-7 без спец. хака, которому тоже нужна фикс высота | |
| |
|
|
| |
|
|
| |
для: TetRiska
(15.04.2011 в 10:46)
| | | а zoom:1 не сработает? ну, так называемая hasLayout? | |
| |
|
|
| |
|
|
| |
для: dimon
(15.04.2011 в 11:42)
| | | а что мы добьемся собственно им? | |
| |
|
|
| |
|
|
| |
для: TetRiska
(15.04.2011 в 00:55)
| | | в общем, пока не знаю, что это у меня получилось, но что-то получилось. попробую просто выложить измененные стили:
.box_100proc{
width:100%;
display:inline-block;
position:relative;
}
|
.right_pp_content {
position:absolute;
top:50%;
right:140px;
margin-top:-20px; /*предполагается, что высота изображения все-таки известна: нужно установить значение-ImgHieght/2, так как блок будет имет, вероятно, высоту изображения. без этого, весь блок будет сдвинут немного ниже центра */
margin-right: -140px;
width: 140px;
}
|
скорее всего, в общем дизайне всё-равно не сработает. | |
| |
|
|
| |
|
|
| |
для: dimon
(15.04.2011 в 13:09)
| | | решил уже и таблицами и дивами :) | |
| |
|
|
| |
|
|
| |
для: TetRiska
(15.04.2011 в 17:01)
| | | а дивами как? поделитесь :) я ж тоже участвовал :) | |
| |
|
|
| |
|
|
| |
для: dimon
(15.04.2011 в 17:14)
| | |
<style type='text/css'>
.box_100proc{
width:100%;
display:inline-block;
}
.box_pp_block {
border-left: 341px solid transparent;
border-right: 140px solid transparent;
position: relative;
border 1px solid red;
}
* html .box_pp_block {
border-color:white;
filter: chroma(color=white);
}
.box_pp_block:after{
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.box_pp_content {
width: 100%;
float: left;
overflow: hidden;
margin-right: -100%;
position: relative;
}
.box_pp_content_desc{
text-align:justify;
padding:0 5px;
}
.left_pp_content {
float: left;
width: 341px;
margin-left: -341px;
position: relative;
}
.left_pp_content img{
float:left;
}
.box_pp_content_info{
float:left;
margin-left:10px;
width:231px;
position: relative;
}
.box_block{
margin-bottom:10px;
display:inline-block;
}
.box_block_end{
display:inline-block;
}
.valume_name{
width:126px;
float:left;
}
.valume_name span{
font-weight:bold;
color:#777777;
white-space:nowrap;
}
.valume{
width:100px;
float:left;
margin-left:5px;
}
.right_pp_content {
width: 140px;
top: 49%;
right: 10px;
margin-right: -140px;
position: absolute;
}
.box_action_price{
width:106px;
text-align:right;
float:left;
height: 100%;
}
.action_price{
color:#993300;
font-weight:bold;
font-size:13px;
margin-right:5px;
}
.basket{
background:url(/images/addtobasket.gif) no-repeat;
width:32px;
height:32px;
cursor:pointer;
float:right;
}
.clearfix:after {
clear:both;
content:'.';
display:block;
visibility:hidden;
height:0;
}
.clearfix {
display:block;
}
* html .clearfix {
height:1%;
}
*+html .clearfix {
display:inline-block;
}
</style>
<div class="box_100proc">
<div style="height: 1%;">
<div class="box_pp_block clearfix">
<div class="box_pp_content">
<div class="box_pp_content_desc">text text text text text text text text text text text text text text</div>
</div>
<div class="left_pp_content">
<img width="100" height="100" border="0" alt="" src="/images/no_photo_100.gif" />
<div class="box_pp_content_info">
<div class="box_block">
<div class="valume_name"><span>Год выпуска:</span></div>
<div class="valume">2002</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Пробег, тыс.км.:</span></div>
<div class="valume">100 000</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Моточасы, тыс.час.:</span></div>
<div class="valume">450 000</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Налёт, тыс.час.:</span></div>
<div class="valume">500 000</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Двигатель, см.куб.:</span></div>
<div class="valume">142</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Мощность, л.с.:</span></div>
<div class="valume">106</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Вид топлива:</span></div>
<div class="valume">Бензин</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Макс. скорость, км/ч:</span></div>
<div class="valume">250</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Расход, л./100км.:</span></div>
<div class="valume">20</div>
</div>
<div class="box_block">
<div class="valume_name"><span>Объём бака, л.:</span></div>
<div class="valume">100</div>
</div>
<div class="box_block_end">
<div class="valume_name"><span>Дата обновления:</span></div>
<div class="valume">14.04.11 17:44</div>
</div>
</div>
</div>
<div class="right_pp_content">
<div class="box_action_price">
<div class="action_price">1 000 000 грн</div>
<div class="action_price">5 000 €</div>
</div>
<div title="Добавить в корзину" class="basket"></div>
</div>
</div>
</div>
</div>
|
| |
| |
|
|
