как растянуть блок содержимым ?

iillyyaa2 · May 31, 2011

что то я совсем

скажем блок расположен в блоке который имеет ширину 100% и центрирует по центру..

но вкладываемый блок всегда тянется на 100% в ширину, а хочется что бы он растягивался по содержимому.

резиновый блок...

тоже самое как если дать ему float:left но нужно, что бы он остался по центру, а не ушел к краю.

всегда засовывал таблицу и она сама растягивалась... а тут хочу блок

new01 · May 31, 2011

Попробуйте не указывать ширину у блока который внутри,но прописать padding:10px; к примеру . И внутри него не просто вставлять текс,а в <p> или <div> .И ещё укажите по центру. Может быть сработает.Я бы так попробовал.Напишите ,что получилось.

iillyyaa2 · May 31, 2011

так опять же, вставляемый див, опять растянется на всю ширину.. ему не надо указывать...

а падинг всего на 10 пикселей уменьшит.. смысл

new01 · May 31, 2011

Тогда,честно,не знаю.

psywalker · May 31, 2011

что то я совсем
скажем блок расположен в блоке который имеет ширину 100% и центрирует по центру..
но вкладываемый блок всегда тянется на 100% в ширину, а хочется что бы он растягивался по содержимому.
резиновый блок...
тоже самое как если дать ему float:left но нужно, что бы он остался по центру, а не ушел к краю.
всегда засовывал таблицу и она сама растягивалась... а тут хочу блок

Не поверишь, но тебя снова могут спасти инлайн-блоки

Softlink · May 31, 2011

что то я совсем
скажем блок расположен в блоке который имеет ширину 100% и центрирует по центру..
но вкладываемый блок всегда тянется на 100% в ширину, а хочется что бы он растягивался по содержимому.
резиновый блок...
тоже самое как если дать ему float:left но нужно, что бы он остался по центру, а не ушел к краю.
всегда засовывал таблицу и она сама растягивалась... а тут хочу блок
Не поверишь, но тебя снова могут спасти инлайн-блоки

iillyyaa2 · May 31, 2011

что то я совсем
скажем блок расположен в блоке который имеет ширину 100% и центрирует по центру..
но вкладываемый блок всегда тянется на 100% в ширину, а хочется что бы он растягивался по содержимому.
резиновый блок...
тоже самое как если дать ему float:left но нужно, что бы он остался по центру, а не ушел к краю.
всегда засовывал таблицу и она сама растягивалась... а тут хочу блок
Не поверишь, но тебя снова могут спасти инлайн-блоки

ты наверно тоже не поверишь, но я подумал уже об этом (вспоминая тебя), потыркал, потыркал и не понял как они мне могут помочь

Softlink · May 31, 2011

а если попробовать внутреннему блоку не задавать ширины и прописать margin:0 auto. По идее он должен центрироваться относительно родителя. Ну это мне так думается, хотя сам не проверял.

iillyyaa2 · May 31, 2011

но какова будет его ширина ?

делается типа всплывающей подсказки, и она не должна быть на весь экран по ширине а должна быть по содержимому...

сейчас работает на таблице внутри, вот хочу её заменить...

psywalker · May 31, 2011

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

1. Скриншоты того, как должно быть и как не должно.

2. Ссылку на то, что уже сделал.

3. Подробные объяснения, что нужно получить.

Azadi · June 1, 2011

http://mauzon.com/dev/centered_nav/ — ссылка для тех, кто не умеет центрировать инлайн-блоки. Но рекомендую разобраться с этими инлайн-блоками.

iillyyaa2 · June 1, 2011

psywalker, я догадываюсь, что решение только:

делаем блок 50%, лепим его вправо к примеру

внутрь блок лепим влево и -50%

но может есть какая то возможность ещё ?

надо что бы блок не растягивался на 100% ширины доступной ему, а занимал столько ширины, сколько в нём текста..

типа как блок с float:left

только вот выравнивание это не надо

TMGLUK · June 1, 2011

<div style="width:100%;text-align:center;>
   <div style="display:inline-block;">блок автоматического размера по центру</div>
</div>

<div style="width:100%;>
   <div style="display:inline-block;">блок автоматического размера слева</div>
</div>

<div style="width:100%;>
   <div style="display:inline-block;">блок автоматического размера слева</div>
   <div style="display:inline-block;">ещё один блок справа от предыдущего</div>
</div>

Edited June 1, 2011 by TMGLUK

iillyyaa2 · June 1, 2011

TMGLUK, у тебя только текст по центру...

ты дай рамку своему блоку и увидишь его размеры.

Azadi · June 2, 2011

TMGLUK, у тебя только текст по центру...
ты дай рамку своему блоку и увидишь его размеры.

Не будьте голословным, пожалуйста: http://jsfiddle.net/WpkrN/

TMGLUK · June 2, 2011

И работать это в IE6 не будет.

Что бы работало в IE7, нужно div заменить на span (или другой строковый элемент):

<div style="text-align:center;>
   <span style="display:inline-block;">блок автоматического размера по центру</span>
</div>

Вот тут другие способы для любых браузеров: http://habrahabr.ru/blogs/css/117109/

Edited June 2, 2011 by TMGLUK

ykero · June 2, 2011

Доброго времени суток!

Подскажите, а как сделать центрирование блока по горизонтали в ячейке?

Сейчас блок смещен влево.


<link rel="stylesheet" type="text/css" href="../CSS/cssmenustyles.css">
<table width="850" border="0" align="center">
  <tr align="center">
    <td align="center"><ul id="cssmenu">
        <li><a href="#">Текст1</a>
  </li>
        <li><a href="#">Текст2</a>
        </li>
        <li><a href="#">Текст3</a>
        </li>
<li><a href="#">Текст4</a>
                <ul>
                        <li><a href="#">Текст5</a></li>
                        <li><a href="#">Текст6</a></li>
                        <li><a href="#">Текст7</a></li>
                </ul>
                <li><a href="#">Текст8</a>
                <ul>
                        <li><a href="#">Текст9</a></li>
                        <li><a href="#">Текст10</a></li>
                        <li><a href="#">Текст11</a></li>
                        <li><a href="#">Текст12</a></li>
                </ul>
        </li>
        <li><a href="#">Текст13</a>
        </li>
        <li><a href="#">Текст14</a>
        </li>
</ul></td>
  </tr>
</table>

@charset "utf-8";
/* CSS Document */

ul#cssmenu {
	width: 850px; /* ширина всего блока меню */
	margin: 0px auto;
	border: 0 none;
	padding: 0;
  	list-style: none;
	background: #5875A1;
  	height: 30px;
	font: bold 12px/28px Verdana, Arial;
	border-left:#5875A1 1px solid;
}

ul#cssmenu li {
	margin: 0;
	border: 0 none;
	padding: 0;
	float: left;
	display: inline; 
	list-style: none;
	position: relative;
	height: 30px;
}

ul#cssmenu ul {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: 160px;
	list-style: none;
	display: none;
	position: absolute;
	top: 30px;
	left: 0;
}

ul#cssmenu ul:after {
	clear: both;
	display: block;
	font: 1px/0px serif;
	content: ".";
	height: 0;
	visibility: hidden;
}

ul#cssmenu ul li {
	width: 190px; /* ширина выпадающей части */
	float: left;
	display: block !important;
	display: inline;
}

/* Main Menu */
ul#cssmenu a {
	border: 0px;
	padding: 0 10px;
	float: none !important;
	float: left;
	display: block;
	background: #5875A1;
	color: #FFFFFF;
	font: bold 12px/28px Verdana, Arial;
	text-decoration: none;
	height: auto !important;
	height: 1%;
}

/* Main Menu Hover */
ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
	background: #FFFFFF;
	color:#5875A1;
	border-top:#5875A1 1px solid;
}

/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
	border-top: 2px solid #FFFFFF;
	float: none;
	background: #5875A1;
	color: #FFFFFF;
}

/* Second Menu Hover */
ul#cssmenu li:hover li a:hover,
ul#cssmenu li:hover li:hover a,
ul#cssmenu li.iehover li a:hover,
ul#cssmenu li.iehover li.iehover a {
	border-top: 2px solid #FFFFFF;
	background: #FFFFFF;
	color:#5875A1;
	border:#5875A1 1px solid;
}

ul#cssmenu ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 170px;
}

ul#cssmenu li:hover ul ul,
ul#cssmenu li.iehover ul ul {
	display: none;
}

ul#cssmenu li:hover ul,
ul#cssmenu ul li:hover ul,
ul#cssmenu li.iehover ul,
ul#cssmenu ul li.iehover ul {
	display: block;
}

iillyyaa2 · June 2, 2011

И работать это в IE6 не будет.
Что бы работало в IE7, нужно div заменить на span (или другой строковый элемент):
<div style="text-align:center;>
   <span style="display:inline-block;">блок автоматического размера по центру</span>
</div>
Вот тут другие способы для любых браузеров: http://habrahabr.ru/blogs/css/117109/

так как раз нужно больше для ие6

ибо в нём какой то глюк когда 3 вложенных таблицы.. чё то пнг не прорисовываются при резке их из 1 файла...

код приводить не буду, он слишком громоздкий

вот и хочу уменьшить таблиц и блоков...

Sign In

как растянуть блок содержимым ?

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information