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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем realmadrid, 12 дек 2007.

  1. realmadrid

    realmadrid Гость

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

    Код (Text):
    <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>
    Один недостаток: приходится указывать фиксированную ширину. Как сделать, чтобы такая конструкция растягивалась по содержимому? Заранее спасибо.
     
  2. GOsha

    GOsha Гость

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

    realmadrid Гость

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

    GOsha Гость

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

    Andrew Stephanoff Гость

    необходимо заменить
    Код (Text):
    width: 300px
    на
    Код (Text):
    float: left
    не забудь потом убрать обтекание, например так
    Код (Text):
    <div style="clear:both"><!-- --></div>
    В итоге должно получиться примерно так:
    Код (Text):
    <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>
     
Загрузка...

Поделиться этой страницей