Как контролировать высоту границы?

18

У меня есть два div, один слева, а другой - справа. Теперь я хочу разделить этот два div с границей между ними. Но граница с полной высотой выглядит плохо.

Я хочу контролировать высоту границы. Как я могу это сделать?

    
задан Jichao 17.10.2010 в 14:58
источник

6 ответов

31

Граница всегда будет на всей длине содержащего окна (высота элемента плюс его отступы), он не может управляться, кроме как регулировать высоту элемента, к которому он применяется. Если вам нужен только вертикальный делитель, вы можете использовать :

<div id="left">
  content
</div>
<span class="divider"></span>
<div id="right">
  content
</div>

С помощью css:

span {
 display: inline-block;
 width: 0;
 height: 1em;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
}

Демо в JS Fiddle , отрегулируйте высоту span.container , чтобы отрегулировать высоту границы.

Или, чтобы использовать псевдоэлементы ( ::before или ::after ), учитывая следующий HTML:

<div id="left">content</div>
<div id="right">content</div>

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

div {
    display: inline-block;
    position: relative;
}

div + div {
    padding-left: 0.3em;
}

div + div::before {
    content: '';
    border-left: 2px solid #000;
    position: absolute;
    height: 50%;
    left: 0;
    top: 25%;
}

демонстрационная версия JS Fiddle .

    
ответ дан David Thomas 17.10.2010 в 15:02
источник
  • скрипка прошла AWOL –  Neil 11.06.2013 в 11:45
  • лучше использовать: после –  Scott Simpson 28.07.2014 в 23:20
  • @scott: true, единственная причина, по которой они изначально не использовались, состоит в том, что я не думаю, что тогда я знал о :: before, или :: after псевдоэлементах. Я попытаюсь пересмотреть, чтобы включить эту идею, как только я вернусь к компьютеру, а не к мобильному. –  David Thomas 29.07.2014 в 00:59
  • @DavidThomas - здесь ya go: jsfiddle.net/3vcVZ/5 –  Scott Simpson 29.07.2014 в 18:39
10

Только использование line-height

line-height: 10px;

    
ответ дан Đinh Tiến Vũ 05.12.2014 в 04:34
источник
1

неплохо .. но попробуйте этот ... (должен работать для всех, кроме ist just -webkit)

<br>
<input type="text" style="
  background: transparent;
border-bottom: 1px solid #B5D5FF;
border-left: 1px solid;
border-right: 1px solid;
border-left-color: #B5D5FF;
border-image: -webkit-linear-gradient(top, #fff 50%, #B5D5FF 0%) 1 repeat;
">

// Не стесняйтесь редактировать и добавлять все другие браузеры.

    
ответ дан Alexander Sidikov 30.07.2013 в 18:51
источник
1

Я просто искал это ... Используя ответ Дэвида, я использовал пролет и дал ему некоторое дополнение (высота не будет работать + проблема с верхним маржем) ... Работает как шарм;

См. скрипка

<ul>
  <li><a href="index.php">Home</a></li><span class="divider"></span>
  <li><a href="about.php">About Us</a></li><span class="divider"></span>
  <li><a href="#">Events</a></li><span class="divider"></span>
  <li><a href="#">Forum</a></li><span class="divider"></span>
  <li><a href="#">Contact</a></li>
</ul>

.divider {
    border-left: 1px solid #8e1537;
    padding: 29px 0 24px 0;
}
    
ответ дан Abdul Sadik Yalcin 13.02.2015 в 01:06
источник
0
  

Я хочу контролировать высоту границы. Как я могу это сделать?

Вы не можете. Границы CSS всегда будут охватывать всю высоту / ширину элемента.

Одна обходная идея - использовать абсолютное позиционирование (которое может принимать процентные значения), чтобы поместить пограничный элемент внутри одного из двух div. Для этого вам нужно будет сделать элемент position: relative .     

ответ дан Pekka 웃 17.10.2010 в 15:00
источник
0

Вы можете создать изображение любой высоты, которую хотите, а затем поместить это с помощью свойства background (-position) CSS, например:

#somid { background: url(path/to/img.png) no-repeat center top;

Вместо center top вы также можете использовать пиксель или%, как 50% 100px .

Ссылка

    
ответ дан DanMan 18.10.2010 в 00:45
источник