• Курсы Академии Кодебай, стартующие в мае - июне, от команды The Codeby

    1. Цифровая криминалистика и реагирование на инциденты
    2. ОС Linux (DFIR) Старт: 16 мая
    3. Анализ фишинговых атак Старт: 16 мая Устройства для тестирования на проникновение Старт: 16 мая

    Скидки до 10%

    Полный список ближайших курсов ...

Как растянуть Div по содержимому?

  • Автор темы realmadrid
  • Дата начала
R

realmadrid

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

Код:
<style type="text/css">
* {margin:0; padding:0;}
body {font:14px arial; text-align:center;}
.rcg {margin:20px auto;text-align:left; [b]width:300px;[/b]}
.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>
Один недостаток: приходится указывать фиксированную ширину. Как сделать, чтобы такая конструкция растягивалась по содержимому? Заранее спасибо.
 
G

GOsha

А если видтх не указывать вообще?
 
R

realmadrid

Тогда рамка растягивается на всю ширину экрана.
 
G

GOsha

А посмотреть результ есть где? Я вообще закругленные края делаю в таблицах
 
A

Andrew Stephanoff

необходимо заменить
Код:
width: 300px
на
Код:
float: left
не забудь потом убрать обтекание, например так
Код:
<div style="clear:both"><!-- --></div>
В итоге должно получиться примерно так:
Код:
<style type="text/css">
* {margin:0; padding:0;}
body {font:14px arial; text-align:center;}
.rcg {margin:20px auto;text-align:left; float: left; }
.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>
<div style="clear:both"><!-- --></div>
 
Мы в соцсетях:

Обучение наступательной кибербезопасности в игровой форме. Начать игру!