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

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

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

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

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

Sutar



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

Код:
<div style="position: relative; display: inline-block; vertical-align: middle; width: 100%;">
Текст 1
 
<div style="width: auto; display: none; position: relative;">Текст 2</div>
 
</div>
 

 
Я стили обрезал, но проблема такая, что блок с содержанием "Текст 2" растягивается полностью по ширине первого div (где "Текст 1")
как сделать чтоб второй блок, растягивался только, по объему который нужен для "Текст 2"....

Всего записей: 1149 | Зарегистр. 15-08-2011 | Отправлено: 21:23 22-09-2014 | Исправлено: Sutar, 21:24 22-09-2014
Mavrikii

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

Цитата:
растягивался только, по объему который нужен для "Текст 2"

display: inline-block
http://htmlbook.ru/samlayout/blochnaya-verstka/strochno-blochnye-elementy

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 21:32 22-09-2014
Sutar



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

Код:
<div style="position: relative; display: inline-block; vertical-align: middle; width: 100%;">  
Текст 1  
 
<span style="position: absolute; margin: 10px 0px 0px 10px; width: 13px; height: 11px;  background: url('../images/igreen.png') no-repeat; display: inline-block;"></span>
 
<div style="width: auto; display: none; position: relative;">Текст 2</div>  
 
</div>  

 
В IE такой баг, что если блок с "Текст 2" открывается, он переходит на новую строку (под Текст 1) (как и нужно), но тег <span></span> содержит иконку. Формально она должна стоять от "Текст 1" на 10 пх правей... Но при открытие блока "Текст 2" иконка переходит на ту-же линию, что и блок <div></div>
 
как это исправить?)
(В браузерах Opera, Chrome, Mazilla и телефонах работает нормально)

Всего записей: 1149 | Зарегистр. 15-08-2011 | Отправлено: 19:31 23-09-2014
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar
не нужно комбинировать position: absolute и display: inline-block
при абсолютном позиционировании элементу все равно, что творится вокруг - он не будет никуда смещаться, только если родитель, от котого идет отсчет положения, сместится.

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 21:29 23-09-2014
Sutar



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
а как тогда скомбинировать можно?
получается полный код такой:
 

Код:
<div class="Group">
  <span class="GroupLeft" style="width: 100px;">Ваше имя</span>
  <input type="text" id="name" maxlength="50" value="" onblur="return CheckName();" style="width: 140px;"/>
  <span class="status_icon" id="icon_1"></span>
  <div class="InfoHidden InfoRed" style="margin: 3px 0px 0px 122px; display: none;" id="infoName">Минимальная длина имение <b>4</b> символа</div>
</div>
 

 
это замета тегов <table><tr><td>....
 
такой вид получается (нормальный, не как в IE):
 
 

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

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

Цитата:
а как тогда скомбинировать можно?  

1) http://htmlbook.ru/html/label
2) скомбинировать что? сообщение об ошибке? обернуть input в div с position:relative;
в него вставить div с сообщением об ошибке и абсолютным позиционированием - его положение будет определяться от родительского дива.

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 22:29 23-09-2014
Sutar



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

Цитата:
обернуть input в div с position:relative;  
в него вставить div с сообщением об ошибке и абсолютным позиционированием - его положение будет определяться от родительского дива.

Всё, сделал) работает вроде отлично))
 
Но только с капчей пробелма((
 

Код:
<img style="position: relative; margin: 10px 0px 0px 10px; cursor: pointer;" id="ImgCaptcha" onclick="return ChangeCaptcha();" alt="" src="/images.html"/>

 
не хочет опускать по высоте(

Всего записей: 1149 | Зарегистр. 15-08-2011 | Отправлено: 22:38 23-09-2014
Mavrikii

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

Цитата:
не хочет опускать по высоте

а top: где? зачем тогда указано position: relative?

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 22:40 23-09-2014
Sutar



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
я не знаю) я эту част спёр с другого сайта)))
 
Вот такой деффект:
   
 

Код:
<div class="Group">
  <span class="GroupLeft" style="width: 100px;">Код</span>
  <input type="text" id="captcha" maxlength="5" value="" onblur="return CheckСaptcha();" style="width: 80px;"/>
  <img style="position: absolute; margin: 2px 0px 0px 10px; cursor: pointer;" id="ImgCaptcha" onclick="return ChangeCaptcha();" alt="" src="/images.html"/>
  <span class="status_icon" id="icon_4"></span>
  <div class="InfoHidden InfoRed" style="margin: 3px 0px 0px 122px; display: none;" id="infoСaptcha">Код указан неправильно</div>
</div>

 
И прилагающие к ним стили:

Код:
 
.InfoHidden {
display: block;
padding: 6px 10px;
margin: 0px;
position: relative;
 
color: #2c3e50;
border: 1px solid #c5d3dc;
background-color: #e8f6ff;
background-image: linear-gradient(to top, #dbf1ff, #e8f6ff);
 
box-shadow: 1px 1px 5px rgba(0,0,0,.19);
border-radius: 3px;
 
}
 
.InfoRed
{
    color: #aa6666;
    border: 1px solid #f5c1ba;
    background-color: #ffedea;
    background-image: linear-gradient(to top, #ffe6e3, #ffedeb);
}
 
 
.InfoHidden:after {
background: url('../images/blue.png') no-repeat;
display: block;
content: "";
position: absolute;
left: 16px;
bottom: 100%;
width: 16px;
height: 9px;
}
 
.InfoRed:after { background: url('../images/red.png') no-repeat; }
.status_icon { display: none; margin-left: 10px; position: relative; width: 13px; height: 11px; top: 0px; }
.icon_green { background: url('../images/igreen.png') no-repeat; display: inline-block; }
.icon_reed { background: url('../images/ired.png') no-repeat; display: inline-block; }
 
 
.Group {
position: relative;
display: inline-block;
line-height: 18px;
vertical-align: middle;
margin-bottom: 10px;
width: 100%;
}
 
.GroupLeft {
width: 35%;
text-align: right;
color: #2c3e50;
font-family: Segoe UI;
font-size: 14px;
font-weight: 700;
line-height: 18px;
margin: 4px 18px 0px 0px;
display: inline-block;
vertical-align: top;
}

 
может вы посоветуете, как лучше через div реализовать вид table?)
т.е. чтоб была строка div в основание (которая отвечата за полную ширину блока, в котором находится div)
и в нем, был слева текст справа поля для ввода) ну и иконки статуса поля....
просто целый день над этим голову ломаю((
и никак мудро не могу реализовать((

Всего записей: 1149 | Зарегистр. 15-08-2011 | Отправлено: 22:51 23-09-2014
Mavrikii

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

Цитата:
я не знаю) я эту част спёр с другого сайта)))

какой смысл использовать то, что не понимаешь?
 
http://jsfiddle.net/642xm802/

Код:
<div>
    <label for="label1">Имя:</label>
    <div style="position:relative;display:inline-block">
       <input type="text" style="width:200px;padding:4px;" id="label1">
       <div style="position:absolute;background-color:red;left:15px;top:20px;">Сообщение об ошибке</div>
       <div style="position:absolute;right:-15px;top:5px;width:10px;height:10px;font-size:8pt;">X</div>
    </div>
</div>

 
даже лучше так, тогда сообщение об ошибке не зависит от того, используется input или textarea
http://jsfiddle.net/642xm802/1/

Код:
<div>
    <label for="label1">Имя:</label>
    <div style="position:relative;display:inline-block">
       <input type="text" style="width:200px;padding:4px;" id="label1">
       <div style="position:absolute;background-color:red;left:15px;bottom:-10px;">Сообщение об ошибке</div>
       <div style="position:absolute;right:-15px;top:5px;width:10px;height:10px;font-size:8pt;">X</div>
    </div>
</div>

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 22:57 23-09-2014 | Исправлено: Mavrikii, 23:00 23-09-2014
Sutar



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

Цитата:
какой смысл использовать то, что не понимаешь?  

Нет, ну я как-то да разбираюсь не много)
 
Спасибо за ссылки посмотрел.
Такой вопрос, какая разница будет между:
 

Код:
<div style="position: relative; display: inline-block; vertical-align: middle; width: 100%;"/>

и
 

Код:
<div style="vertical-align: middle;"/>

 
Просто с width: 100%; что с ним, что без него, эффект одинаковый и на телефоне, и в IE и в Opera.... div растягивается по макс. родительского элемента.
с display: inline-block; тоже толку нету... что inline-block что block, все <div> начинаются с новой строки (ниже предыдущего div).... а все элементы внутри его, располагаются в ряд...

Всего записей: 1149 | Зарегистр. 15-08-2011 | Отправлено: 23:01 23-09-2014 | Исправлено: Sutar, 23:19 23-09-2014
Mavrikii

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

Цитата:
div растягивается по макс. родительского элемента

vertical-align не влияет на ширину.
width: 100% говорит занимать все возможное место, поэтому неэффективно с inline-block
http://jsfiddle.net/g3b68s7h/

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 23:32 23-09-2014 | Исправлено: Mavrikii, 23:33 23-09-2014
Sutar



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Я понял, спасибо вам
 
если в моем случае (для такого вида, как на скринах) указывать для div лучше display: block?
 
И вторая ошибка...

Код:
<div style="position: relative; display: inline-block;">
  <input type="text" id="captcha" maxlength="5" value="">
  <img style="position: absolute; top: 0%; left: 100%; margin: 2px 0px 0px 10px; cursor: pointer;" id="ImgCaptcha" onclick="return ChangeCaptcha();" alt="" src="/images.html">
  <span style="display: block; background: url('../images/igreen.png') no-repeat; position: absolute; width: 13px; height: 11px; top: 10px; margin-left: 10px; left: 100%;" id="icon_4"></span>
</div>

 
Иконка Х налазит на капчу( если у капчи убрать position: absolute; то её нельзя будет двигать по оси Y (по высоте) экрана... т.е. нельзя воспользоваться margin-top: 2px

Всего записей: 1149 | Зарегистр. 15-08-2011 | Отправлено: 16:21 24-09-2014 | Исправлено: Sutar, 18:00 24-09-2014
Mavrikii

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

Цитата:
position: absolute; то её нельзя будет двигать по оси Y (по высоте) экрана... т.е. нельзя воспользоваться margin-top: 2px

margin-top не имеет отношения к абсолютному позиционированию.
ну добавьте, в данном случае, к right: крестика расстояние достаточное для ширины каптчи

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 21:14 24-09-2014
Sutar



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

Код:
position: absolute;
width: 13px;
height: 11px;
top: 10px;
margin-left: 10px;
left: 100%;
background: url('../images/ired.png') no-repeat;
overflow: hidden;
display: block;

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

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar
я, вроде бы, иначе его записывал - через right, так что всегда привязан к правой границе родителя.
если хотите делать по своему - делайте.

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 21:25 24-09-2014
Sutar



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
если указать left: 100%;  он сразу по правому краю будет,
а чтоб указать с right, это нужно right: -25px;
это будет корректно?

Всего записей: 1149 | Зарегистр. 15-08-2011 | Отправлено: 23:50 24-09-2014
Mavrikii

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

Цитата:
это будет корректно?

попробуйте, что вызывает проблему?  
зато будет на точном расстонии от правой границы, особенно когда нужно сместить на какое то конкретное расстоние - тогда проценты не помогут.

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 23:52 24-09-2014
Sutar



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо, вроде всё работает корректно что в современном браузере, что в старых версиях IE. (Просто под сйат стараюсь написать так, чтоб шаблон не плавал на разных браузерах...)
 
Ещё раз спасибо Вам. Помимо того, что Вы помогли, Вы ещё не много просветили, как тут всё взаимосвязано....)

Всего записей: 1149 | Зарегистр. 15-08-2011 | Отправлено: 00:14 25-09-2014
Sutar



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Ещё такой вопрос по тегу <div/>
если написать код так:
 

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

 
По идее, результат должен быть таким:
 

Код:
Текст 1(пробел 10px)Текст 2

но получается:

Код:
Текст 1(пробел 10px) Текст 2

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

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

 
Вопрос: Этот пробел является реакцией переноса div на новую строку? Его можно как-то скрыть или чтото с ним сделать? просто я привел пример с малым куском, а у меня используется очень длинный код, и если всё ставить в строчку, становится неудобно управлять исходником.

Всего записей: 1149 | Зарегистр. 15-08-2011 | Отправлено: 19:53 26-09-2014
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

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


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

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.Board
© Ru.Board 2000-2020

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru