Вторая граница элемента - PullRequest
Новая
       10

Вторая граница элемента

1 голос
/ 22 января 2012

Мне нужно было создать вторую рамку без использования изображений, поэтому моя идея заключалась в том, чтобы сделать еще один div внутри родительского, например: 

<div class="box news">
    <div class="title">{l_news}</div>
    <marquee behavior="scroll" direction="left" loop="-1" scrollamount="3" scrolldelay="0">{news}</marquee>
    <div class="border"></div>
</div>

Мой css: 

.box{
    float: left;
    position: relative;
    margin: 15px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #9a9a9a;
}
.box div.title{
    clear: left;
    width: 100%-10px;
    height: 22px;
    padding-top: 2px;
}
.border{
    width: 100%-2px;
    position: absolute;
    top: 0px; left: 0px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    border: 1px solid #d6d6d6;
}

Ширина : 100% -10px сработала в первый раз, но не во второй раз. Зачем? Любые предложения для обхода этого>

Ответы [ 5 ]

3 голосов
/ 22 января 2012

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

Для title div я бы рекомендовал дать .box a padding: 10px.

Я не на 100% понимаю, как вы хотите, чтобы граница была, но я думаю, что вы сможете работать с left: 2px; right: 2px; top: 2px; bottom: 2px или ее разновидностью.

2 голосов
/ 22 января 2012

Ширина: 100% -10px работала в первый раз, но не во второй раз. Почему?

Не работает, недопустимые значения свойств игнорируются. Возьмите этот пример:

http://jsfiddle.net/gR4GF/1/

div {
    width: 50%;
    width: Chuck Norris;
}

Ширина заканчивается как 50%.

В любом случае, если вы хотите использовать дополнительную разметку для добавления дополнительной рамки, не используйте пустые элементы, такие как <div></div>, вместо wrap элемент в div:

http://jsfiddle.net/gR4GF/2/

<div class="box news">
    <div class="border">
        <div class="title">{l_news}</div>
        <marquee behavior="scroll" direction="left" loop="-1" scrollamount="3" scrolldelay="0">{news}</marquee>
    </div>
</div>

И да, мы все сжимаемся в этом <marquee> - может быть, вам стоит попробовать решение javascript ;)

2 голосов
/ 22 января 2012

вы должны использовать один div и затем присвоить ему это свойство outline: 1px solid #d6d6d6;. Это даст div видимость бытия внутри другого ... если это то, что вы хотите.

1 голос
/ 23 января 2012

Если вы хотите двойную границу, почему бы просто не установить ее в свойстве "border"?Дополнительная разметка div не требуется.

Просто сделайте что-то вроде этого: 

border: 3px double #000;

Также, если вы хотите использовать операции в вашем CSS, посмотрите на использование препроцессора css, такого как LESS.или SASS.

1 голос
/ 22 января 2012

Вы можете использовать box-shadow или псевдо-элементы для создания нескольких границ:

http://css -tricks.com / snippets / css / множественные границы /

Использование: перед 

.box{
    float: left;
    position: relative;
    margin: 15px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #9a9a9a;
}

.box:before {
   content: " ";
   position: absolute;
   z-index: -1;
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
   border: 2px solid #ffea00;
}

Использование Box Shadow 

.box{
    float: left;
    position: relative;
    margin: 15px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #9a9a9a;
    -moz-box-shadow: 0 0 0 #333;
    -webkit-box-shadow: 0 0 0 #333;
    box-shadow: 0 0 0 #333;
}

Как создать "100% - 10px"

Элементы уровня блока (например, div) по умолчанию занимают всю ширину родительского элемента.Это не то же самое, что объявить width: 100%.Таким образом, если вы добавите margin-left: 10px к вашему div, (не объявляя ширину), вы фактически дадите 100% ширины, за вычетом левого поля в 10px.

...