Помощник
|
Помогите решить задачу |
khlebnikov
|
Сообщение
#1
|
||
|
|
||
|
|||
Den1xxx |
8.6.2013, 19:16;
Ответить: Den1xxx
Сообщение
#2
|
|
|
|
|
khlebnikov
|
Сообщение
#3
|
|
Там решение идет тоже с неявным использованием marginов у абзаца <p class="num"> (Действуют marginы, присутствующие у него по умолчанию).
Поэтому в первоначальном варианте вроде как все нормально: http://jsfiddle.net/9umZN/ (Для наглядности я задал фоновый цвет у внешнего diva) Но если аннулировать marginы у класса .num, то результат будет уже таким: http://jsfiddle.net/rfHyR/ Понятно, что margin-top, которое задается браузером по умолчанию - величина постоянная и не зависит от содержимого внешнего блока, или каких-либо других обстоятельств. (По моим прикидкам этот margin-top по умолчанию равен 16 пикселям). Поэтому вот, что произойдет, если вставить в приведенное на сайте решение другую картинку (с другой высотой): http://jsfiddle.net/82ACR/ В общем, там приведено плохое решение, которое требует осуществлять подгонку каждый раз, когда вставляется новая картинка. Я бы не хотел такое решение применять в верстке. |
|
|
gen-5 |
9.6.2013, 21:58;
Ответить: gen-5
Сообщение
#4
|
|
для img и span {display: inline-block;vertical-align:middle;}
для main убераете высоту и float что вы применяли для span вот решение, там уже доверстаете как вам надо, суть изложил. И если по inline-block в IE7 , разберите самостоятельно посредством гугла. |
|
|
khlebnikov
|
Сообщение
#5
|
|
gen-5, так-то оно, конечно, так: http://jsfiddle.net/tdhdU/
Но тогда нет выравнивания номера по правому краю. А я не вижу другого способа реализовать это выравнивание, как только при помощи float:right. Но в этом случае уже исчезает вертикальное выравнивание. Хотя, наверное, в реальной ситуации правильнее все-таки не прижимать номер к краю страницы, все равно хотелось бы решить эту задачу так, как она была сформулирована. Или хотя бы узнать решаема ли она вообще на одних только HTML и CSS. |
|
|
gen-5 |
10.6.2013, 12:46;
Ответить: gen-5
Сообщение
#6
|
|
можно и по правому краю, я суть вам написл. просто там надо разметку поменять ещё больше, у меня времени не было..... <div class="wrap"><div class="col"><img></div><div class="col"><span></span></div></div> Для всех тегов - display:inline-block;vertical-align:middle; кроме .wrap
Для класса .col {displa:inline-block;vertical-align:middle;text-align:right;width:49%;} |
|
|
webslicer |
10.6.2013, 12:57;
Ответить: webslicer
Сообщение
#7
|
|
:wacko:
|
|
|
khlebnikov
|
Сообщение
#8
|
|
можно и по правому краю, я суть вам написл. просто там надо разметку поменять ещё больше, у меня времени не было..... <div class="wrap"><div class="col"><img></div><div class="col"><span></span></div></div> Для всех тегов - display:inline-block;vertical-align:middle; кроме .wrap Для класса .col {displa:inline-block;vertical-align:middle;text-align:right;width:49%;} Ну как-то так: http://jsfiddle.net/ganf2/ |
|
|
gen-5 |
10.6.2013, 19:23;
Ответить: gen-5
Сообщение
#9
|
|
задча выполненна, или нет? не вижу возгласов радости..... Я вижу,что всё получилось...
|
|
|
khlebnikov
|
Сообщение
#10
|
|
Спасибо! Но формула все равно не по центру (по центру ее правый край, а не середина). Я уже и через фон пытался картинку установить, и сместить этот фон ровно наполовину его длины. Но только так ни фига не получается.
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Помогите вспомнить рекламного бота Телеграм для обмена рекламой | 0 | Mixatraider | 692 | 21.2.2024, 23:42 автор: Mixatraider |
|
Помогите рещить проблему с монитором. Почему низкое разрешение при подключении монитора через displayport? |
0 | Levels | 1695 | 11.12.2020, 0:48 автор: Levels |
|
Помогите кто нибудь получить партнерку Росбанк! | 7 | heisenberg_mw | 2315 | 7.8.2020, 9:28 автор: heisenberg_mw |
|
Помогите найти тему пожалуйста | 7 | virtas | 12402 | 24.7.2020, 17:02 автор: -JamesSmips- |
|
Помогите с поиском доноров | 3 | tehno_music | 3332 | 4.11.2019, 17:15 автор: goblin78 |
Текстовая версия | Сейчас: 29.3.2024, 2:00 |