Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Активные темы » Блок div по ширине своего текста

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2

Открыть новую тему     Написать ответ в эту тему

panda3

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar
Вставил пробел - получил пробел. Не вставляй пробел, перенеси так, например:

Код:
<div style="margin-right: 10px; display: inline-block;">Текст 1</div><div
style="display: inline-block;">Текст 2</div>

Или так:

Код:
<div style="margin-right: 10px; display: inline-block;">
Текст 1</div><div style="display: inline-block;">
Текст 2</div>

Всего записей: 203 | Зарегистр. 06-02-2007 | Отправлено: 07:55 29-09-2014 | Исправлено: panda3, 08:02 29-09-2014
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
panda3
Спасибо.
 
А как выровнять изображение по центру <div>?
в инете много способов перепробовал...
 

Код:
<div style="background: #ffffff; float: left; width: 180px; height: 86px; margin: auto; vertical-align:middle; text-align: center;">
<img src="../images/mico/wm2.png" alt=""/>
</div>

 
но картинку не выравнивает(
как её можно выровнять по центру div (по высоте и ширине)

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 21:44 29-09-2014
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar

Цитата:
но картинку не выравнивает(  

ссылку

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 01:51 30-09-2014
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
/dell

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 17:00 30-09-2014 | Исправлено: Sutar, 18:59 30-09-2014
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
1

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 21:02 30-09-2014 | Исправлено: Sutar, 21:14 30-09-2014
panda3

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar
Перенеси vertical-align в img, перед height допиши "line-"

Всего записей: 203 | Зарегистр. 06-02-2007 | Отправлено: 19:20 06-10-2014
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Появилась такая проблема (с другими div)
 

Код:
.ServerTop                { background: #e7e7e7; border: 1px solid #b4b4b4; line-height: 28px; width: 948px; }
.a2                { width: 376px; display: inline-block; }
.a3                { width: 200px; display: inline-block; }
.a4                { width: 190px; display: inline-block; }
.a5                { width: 70px; text-align: center; display: inline-block; }
.a6                { width: 55px; margin-right: 20px; text-align: right; display: inline-block; }
 
<div class="ServerTop">
<div class="a1">#</div>
<div class="a2">Название сервера</div>
<div class="a3">Адрес сервера</div>
<div class="a4">Карта</div>
<div class="a5">Игроки</div>
<div class="a6"></div>
</div>

 
В мобильном устройстве (во всех, с системой Android)
если увеличить на странице масштаб, получается что блок с
 

Код:
<div class="a2">Название сервера</div>

уменьшается.... и происходит сдвиг....
 

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 21:19 06-10-2014
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
И второй баг, в EI
Пишем div:
 

Код:
<div class="PageBody" style="display: block;">
<div style="display: inline-block;">
 
<div style="width: 600px; float: left;">Блок 1</div>
<div style="width: 600px; float: left;">Блок 2</div>
 
</div>
</div>

 
суть бага. Если убрать <div style="display: inline-block;"> то стили фона с PageBody не будут... т.е.  
в всех брандмауэрах работает нормально.
в EI первоначально открывает нормально, но если изменить содержание "Блок 1" по высоте, то получается такой деффект:
 

 
как тут всё перегруппировать правильно, чтоб исправить баг?

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 22:17 08-10-2014
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar

Цитата:
как тут всё перегруппировать правильно, чтоб исправить баг?

ну блин.. зачем вы занимаетесь тем, в чем не хотите разбираться?
 

Цитата:
<div class="PageBody" style="display: block;">  
<div style="display: inline-block;">  
 
<div style="width: 600px; float: left;">Блок 1</div>  
<div style="width: 600px; float: left;">Блок 2</div>  
<div style="clear: left;"></div>
 
</div>  
</div>

 
ведь каждую мелочь спрашиваете

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 22:19 08-10-2014 | Исправлено: Mavrikii, 22:19 08-10-2014
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii

Цитата:
clear: left;

зачем тут обтекание?
 
Блок 1 и Блок 2 это только положение на странице двух блоков по сторонам, в которых много блоков (по вертикали)
и если загрузить страницу в EI всё нормально, но если с JS поменять содержания блока, происходит такой сдвиг как на скрине.

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 18:39 09-10-2014
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar

Цитата:
зачем тут обтекание?

какое обтекание??
clear:left очищает то, что делает float:left, помогая браузеру растянуть родителя до конца плавающих блоков.
у вас плавающие блоки выступают за родителя именно по этой причине.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 20:24 09-10-2014 | Исправлено: Mavrikii, 20:25 09-10-2014
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
спасибо, помогло.
просмотрел пару сайтов через div, у них тоже такой-же принцип... спасибо)

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 20:49 10-10-2014
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
т.е. справа Текст 2 появляется пробел (невидимый, но увеличивает пробел между тегами <div/> с содержанием текста.  

Родительскому элементу достаточно прописать word-spacing: -4px; и не нужно париться о корректности форматирования кода:

Код:
<div style="word-spacing: -4px;">
<div style="margin-right: 10px; display: inline-block;">Текст 1</div>  
<div style="display: inline-block;">Текст 2</div>  
</div>

Больше объяснений и вариантов решения проблемы можешь почитать тут http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 18:09 12-10-2014 | Исправлено: Xrobak, 18:11 12-10-2014
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Такой вопрос, есть код:
 

Код:
<div style="overflow: auto; height: 351px; border-left: 1px solid #b4b4b4; border-right: 1px solid #b4b4b4;">
      <div style="width: 298px; border-bottom: 1px solid #eeeeee; line-height: 26px;">
            <div class="a1">1</div>
            <div class="a2" style="width: 245px;">Player 1</div>
      </div>
</div>

 
такой баг
 

 
как убрать полосу прокрутки?
скрыть не вариант...
если делать через table, то получается... а так нет(

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 19:41 14-10-2014
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar
воспроизвести на jsfidlle.net и дать ссылку.
 
либо убрать горизонтальное скроллирование
overflow-y: auto;
overflow-x: hidden;

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 20:07 14-10-2014
victoriabonya1978

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
div {
position:relative;
display:inline;
width:auto;
height:auto;
padding:1rem;
}
 Вот так это делается, пробуйте

Всего записей: 11 | Зарегистр. 25-02-2020 | Отправлено: 18:18 25-02-2020
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » Web-программирование » Активные темы » Блок div по ширине своего текста


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru