CSS круги без ширины или высоты? : Это возможно с чистым CSS или нет? - PullRequest
Новая
       21

CSS круги без ширины или высоты? : Это возможно с чистым CSS или нет?

10 голосов
/ 02 апреля 2012

Я могу превратить div в круг следующим образом: 

.circle {
 background-color: rgba(0, 0139, 0139, 0.5);
 height: 200px;
 width: 200px;
 -moz-border-radius:50%;
 -webkit-border-radius: 50%;
 border-radius:50%;
}

<div class="circle"></div>
</div>

Но я должен указать высоту ширины:

Я хочу отобразить три строки текста в DIV с "нет-wrap ", чтобы каждый из 3 сегментов текста имел собственную строку и не был перенесен.

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

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

Проблема в том, что описанный выше метод работает, только если указана ширина / высота.

Возможно ли это только с использованием CSS, с использованием процентов или мне понадобится JS-решение.

заранее спасибо.

Ответы [ 4 ]

5 голосов
/ 03 апреля 2012

Чистое решение CSS с некоторыми оговорками

Эта скрипка демонстрирует решение, использующее только css .Он работает безупречно (я думаю) в современных браузерах (IE9 +, который необходим для border-radius в любом случае) с отдельными строками текста .Предостережения:

  1. Как видно из розового «круга», текст должен содержаться в одном элементе (а не в нескольких интервалах, как в розовом).Это не большая проблема.
  2. Чтобы получить какой-либо вид "заполнения", нужно поставить прозрачный border на span, установленном на размер "отступа".Это также обычно не должно быть большой проблемой, так как маловероятно, что вы захотите, чтобы границы внутри круга.
  3. Как вы можете видеть по css на голубом круге, , если несколько строкожидается текст (или принудительно в моем случае max-width), тогда css для свойств margin-top и top должны быть установлены в соответствии с количеством строк текста.Это может быть проблемой в зависимости от приложения.В стековой версии IE9 необходимо было установить overflow: auto для правильного определения размера.
  4. Как вы можете видеть по красному кружку, если сузить область отображения, если white-space: nowrap не задано и круг начинаетсяобвивая его одной строкой текста, происходит некоторое овальное искажение круга.

Каждый веб-дизайнер должен будет определить, можно ли учесть ограничения этого решения или нет.Если нет, то решение javascript, размещенное здесь rgthree, должно работать хорошо.Но если ожидается только одна строка (или некоторое заданное количество строк, как в моем голубом круге), тогда это решение css должно работать хорошо.

1 голос
/ 02 апреля 2012

Все, что вам нужно сделать, это заменить рост и ширину отступом и отобразить встроенный блок.Ссылка: http://jsfiddle.net/6mzP7/

.circle {
   background-color: rgba(0, 0139, 0139, 0.5);
   padding: 200px;
   display: inline-block;
   -moz-border-radius:50%;
   -webkit-border-radius: 50%;
   border-radius:50%; 
}

​<div class="circle"></div>

HTML может остаться прежним.

1 голос
/ 02 апреля 2012

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

CSS: 

.circle {
 background-color: rgba(0, 0139, 0139, 0.5);
 -moz-border-radius:50%;
 -webkit-border-radius: 50%;
 border-radius:50%;
 padding:10px;
}
.circle span {
white-space: nowrap;
}
.circle div {
position:relative;
top:0;
left:0;
}

HTML: 

<div class="circle">
    <div>
        <span>this is some text</span>
        <span>this is some more text</span>
        <span>this is text</span>
    </div>
</div>

Сценарий: 

$(function() {
    var widest = 0;
    $('.circle span').each(function(){
        thisWidth = $(this).innerWidth()
        if (thisWidth > widest) {
            widest = thisWidth;
            };
    });
    $('.circle').css('width',widest).css('height',widest);
    $('.circle div').css('top',(widest - $('.circle div').innerHeight())/2);
});

Редактировать: я создал скрипку этого предложения: http://jsfiddle.net/4m2ZZ/

0 голосов
/ 02 апреля 2012

РЕДАКТИРОВАТЬ: я принял ваш вопрос. Вам понадобится Javascript, чтобы присвоить высоту ширине максимальному значению, а также убедиться, что ваш контент центрирован.

Вот как в этом JSFiddle: http://jsfiddle.net/rgthree/K4Kpw/

<div class="circle">
    <div>
        <span>This is a line</span>
        <span>This is yet another line!</span>
        <span>Last Line!</span>
    </div>
</div>​

CSS: 

.circle {
    position:relative;
    background-color: rgba(0, 0139, 0139, 0.5);
    padding:10px;
    -moz-border-radius:50%;
    -webkit-border-radius: 50%;
    border-radius:50%;
}
.circle > div{
    position:absolute;
    top:50%;
    left:50%;
}

JQuery: 

$('.circle > div').each(function(){
    var h, w, max;
    w = $(this).width();
    h = $(this).height();
    max = w > h ? w : h;
    $(this).css('margin-left', -parseInt(w/2,10));
    $(this).css('margin-top', -parseInt(h/2,10));
    $(this).parent().width(max);
    $(this).parent().height(max);
});​
...