VPF::Как растянуть div ро содержимому?

barcelona

Дата 12.12.2007, 13:41 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 21.4.2007

Репутация: нет
Всего: нет

Здравствуйте!
Я откопал в Интернете код для создания закруглённых краёв рамок:

Код


<style type="text/css">
* {margin:0; padding:0;}
body {font:14px arial; text-align:center;}
.rcg {margin:20px auto;text-align:left; width:300px;}
.rb1,.rb2,.rb3,.rb4 {display:block; overflow:hidden;height:1px;}
.rb2,.rb3,.rb4,.text {border:#00f solid; border-width:0 1px;}
.rb1 {background:#00f; margin:0 5px;}
.rb2 {border-width:0 2px; margin:0 3px;}
.rb3 {margin:0 2px;}
.rb4 {margin:0 1px; height:2px;}
.text {display:block; padding:0 10px;}
</style>

<div class="rcg">
<b class="rb1"></b><b class="rb2"></b>
<b class="rb3"></b><b class="rb4"></b>
<div class="text">
Моё содержимое
</div>
<b class="rb4"></b><b class="rb3"></b>
<b class="rb2"></b><b class="rb1"></b>
</div>

Один недостаток: приходится указывать фиксированную ширину. Как сделать, чтобы такая конструкция растягивалась по содержимому? Заранее спасибо.

bars80080

Дата 12.12.2007, 14:56 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

ацкая конструкция, попахивает лихим прошлым когда рисовали с помощью всяких чёрточек и запятых / ;-) - тому наследие/
тут css кода на 400 байт, несложно сделать четыре рисунка в углы меньшего объёма и вставить их несколькими строчками кода

ну а растянуть, не вижу проблемы:

.rcg {margin:20px auto;text-align:left; width:100%;}
она растянется по всему экрану и будет ползать как надо, а ты её в контейнер и тем ограничишь максимальную ширину

Это сообщение отредактировал(а) bars80080 - 12.12.2007, 14:59

barcelona

Дата 12.12.2007, 18:20 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 21.4.2007

Репутация: нет
Всего: нет

bars80080, можно поподробнее? Какой контейнер?

bars80080

Дата 12.12.2007, 18:27 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

ну,

Код


<style>
#up { text-align: center; }
#down { text-align: left; width: 50%; }
</style>
<div id="up"><div id="down">

<div class="rcg">
<b class="rb1"></b><b class="rb2"></b>
<b class="rb3"></b><b class="rb4"></b>
<div class="text">
Моё содержимое
</div>
<b class="rb4"></b><b class="rb3"></b>
<b class="rb2"></b><b class="rb1"></b>
</div>

</div></div>

к тому

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »