[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: вертикальное позицирование одного контейнера
dadli
здраствуите
вот есть код:
<div style="float:left">
<p
style="line-height:5px">aaaa </p>
<p
style="line-height:5px">bbbb </p>
<p
style="line-height:5px">cccc </p>
<p
style="line-height:5px">dddd </p>
<p
style="line-height:5px">ffff </p>
</div>
<div>
<p
style="line-height:5px"> cccc1 </p>
<p
style="line-height:5px"> cccc2 </p>
</div>


хочу так сделать как на скриншите, то есть вертикланое позиця втарого див тег биль такое же, какои есть для тега <p> в котором написано "cccc "
маргин-топ не помагло так как резултат в разних броузерах получается не одинакови



Спустя 14 минут, 43 секунды (12.02.2012 - 16:36) Invis1ble написал(а):
Свернутый текст
Цитата
скриншите

:lol:

так можно, например
    <p style="line-height:5px;display:inline-block">cccc </p>
<p
style="line-height:5px;display:inline-block"> cccc1 </p><br />
<p
style="line-height:5px;display:inline-block">dddd </p>
<p
style="line-height:5px;display:inline-block"> cccc2 </p>

Спустя 6 минут, 58 секунд (12.02.2012 - 16:43) Invis1ble написал(а):
А для чего тебе это нужно?

Спустя 16 секунд (12.02.2012 - 16:43) nugle написал(а):
html
<div class="parent">
<div
class="first">
<p>
aaaa </p>
<p>
bbbb </p>
<p>
cccc </p>
<p>
dddd </p>
<p>
ffff </p>
</div>
<div
class="second">
<p>
cccc1 </p>
<p>
cccc2 </p>
</div>
<div
class="clear"></div>
</div>

css
.clear{clear:both;}
.parent{width:80px;}
.parent div p{line-height:5px}
.first{float:left;}
.second{float:right; padding-top:40px;}

Спустя 7 минут, 41 секунда (12.02.2012 - 16:51) Invis1ble написал(а):
Цитата
.clear{clear:both;}
.parent{width:80px;}
.parent div p{line-height:5px}
.first{float:left;}
.second{float:right; padding-top:40px;}

а еще лучше так
.clear{clear:both;}
.parent{width:80px;}
.parent div p{line-height:0.5em}
.first{float:left;}
.second{float:right;padding-top:3em;}

Спустя 9 минут, 45 секунд (12.02.2012 - 17:01) nugle написал(а):
Invis1ble
так съедит вниз, 2.5 надо)

Спустя 52 секунды (12.02.2012 - 17:01) Invis1ble написал(а):
nugle
я протестил в 4-х браузерах, у меня все ч0тко tongue.gif

Спустя 3 минуты, 40 секунд (12.02.2012 - 17:05) nugle написал(а):
Invis1ble
А у меня нет sad.gif Все равно идея главная моя tongue.gif

Спустя 43 секунды (12.02.2012 - 17:06) Invis1ble написал(а):
nugle
Цитата
А у меня нет

в каком браузере, версия, ОСь

Спустя 4 минуты, 37 секунд (12.02.2012 - 17:10) nugle написал(а):
хром последний, windows 7

Спустя 56 секунд (12.02.2012 - 17:11) dadli написал(а):
Цитата
скриншите
laugh.gif laugh.gif
Invis1ble
Цитата
А для чего тебе это нужно?

хочу сделать под-подменю из одного пyнкта подменю.
nugle
Invis1ble
Цитата
а еще лучше так

везде работает прекрасно, кроме хрома, там "second" контеинер намного више, чем тег <p>cccc </p>. можно исправить ?
верся хрома: 4.1

Спустя 3 минуты, 46 секунд (12.02.2012 - 17:15) nugle написал(а):
dadli
чем тебя мой вариант с px не устроил?

Спустя 2 минуты, 1 секунда (12.02.2012 - 17:17) sergeiss написал(а):
Цитата (dadli @ 12.02.2012 - 18:11)
хочу сделать под-подменю из одного пyнкта подменю.

Подумай тогда, что можно сделать по-другому.

Делаешь список (ul-li....) и изначально скрываешь некоторые внутренние части списка. Посредством CSS либо CSS+JS можно в нужные моменты разворачивать или скрывать эти части.

Спустя 45 секунд (12.02.2012 - 17:18) Invis1ble написал(а):
nugle
Цитата
хром последний, windows 7

у меня в нем все норм. Возможно, дело в доктайпе, я тестирую с
<!DOCTYPE html>

Цитата
чем тебя мой вариант с px не устроил?

с px second вверх смещен

dadli
Цитата
везде работает прекрасно, кроме хрома, там "second" контеинер намного више, чем тег <p>cccc </p>. можно исправить ?
верся хрома: 4.1

Обнови хром :)



Спустя 1 минута, 57 секунд Invis1ble написал(а):
Да, меню лучше делать с помощью списков, как написал sergeiss
Сам недавно намучался с подменю, ненавижу пиксельхантинг mad.gif

Спустя 4 минуты, 8 секунд (12.02.2012 - 17:22) nugle написал(а):
Цитата
с px second вверх смещен

А у меня с em вниз. и с другим доктайпом тоже самое

Спустя 14 минут, 23 секунды (12.02.2012 - 17:36) sergeiss написал(а):
dadli - как вариант для размышления, вот так можно - и никаких извращений, всё вполне кроссбраузерно :) Хотя, конечно, надо будет немного доработать. В т.ч., может быть, использовать не <p>, а другой тэг.

<div style="float:left">
<p
style="line-height:5px">aaaa </p>
<p
style="line-height:5px">bbbb </p>
<p
style="line-height:5px; position:relative;">cccc
<label style="line-height:5px; position: absolute ;left:100px; top:0px"> cccc1 </label>
</p>
<p
style="line-height:5px; position:relative">dddd
<label style="line-height:5px; position: absolute ;left:100px; top:0px"> cccc2 </label>
</p>
<p
style="line-height:5px">ffff </p>
</div>



PS. И потом только надо будет управлять видимостью "детей".

Спустя 14 минут, 46 секунд (12.02.2012 - 17:51) dadli написал(а):
nugle
Цитата
чем тебя мой вариант с px не устроил?

просто в маём версие хрома не работал коректно
Invis1ble
Цитата
Обнови хром smile.gif

я абнавлаяю но может бить комуто (ползователю) есть ранная верся
sergeiss
да, даже маём старом хроме работает коректно
нy спасибо люди smile.gif


боже, почему не сушествует один и толко один браузер на свете ? biggrin.gif

Спустя 3 минуты, 7 секунд (12.02.2012 - 17:54) TranceIT написал(а):
Цитата (dadli @ 12.02.2012 - 14:51)
боже, почему не сушествует один и толко один браузер на свете ?

Потому что он был бы платный и стоил 400$ =)

Спустя 3 минуты, 54 секунды (12.02.2012 - 17:58) Invis1ble написал(а):
Цитата
может бить комуто (ползователю) есть ранная верся

щас может начнется холивар, но, имхо, надо плюнуть на таких
так можно и под NCSA Mosaic начать верстать

В тему http://habrahabr.ru/blogs/browsers/84222/
из комментов
http://upload.wikimedia.org/wikipedia/comm...eb_browsers.svg

Спустя 15 минут, 17 секунд (12.02.2012 - 18:13) redreem написал(а):
для привязки вертикального выравнивания к тексту вообще говоря vertical-align служит. думается грамотная комбинация vertical-align + line-height будет более семантична нежели вышепредложенные решения. хотя я честно говоря не догнал до конца задачу smile.gif если еще актуально - переформулируй, я ковырну smile.gif

Спустя 7 минут, 55 секунд (12.02.2012 - 18:21) Invis1ble написал(а):
Что может быть семантичнее <menu> - <li> ? smile.gif

Спустя 41 минута, 12 секунд (12.02.2012 - 19:03) dadli написал(а):
redreem
Цитата
если еще актуально - переформулируй, я ковырну


пусть будит так, как есть. уже дали рабочего варянта smile.gif
болшое спасибо за предложение smile.gif


_____________


когда чарли чаплин принимал участие в конкурсе: "клон чарли чаплинов", то чарли занимал третю позицию.

Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.