100 % 높이의 열 구분선을 만드는 방법

기본 콘텐츠 및 사이드 바의 기본 설정을 확인하고 그 사이에가는 선이 있어야합니다. 순수한 CSS로 만드는 방법이 있습니까?100 % 높이의 열 구분선을 만드는 방법

<row> 
<div span6> 
<div span1 divider> 
<div span5> 
</row>

분할자가 하나의 얇은 선이되고 높이가 100 %가 되니? 단지이 사용하기위한 (셀에만의) 높이가 고정되어 있지 않은 경우 국경을 왼쪽 -

출처

2012-05-05 client

문제를 해결하는 관련 섹션 (오른쪽)에있는 내용이 있습니까? – PeeHaa

''요소에 대해 들어 본 적이 없습니다. 또한 얇은 선은 어떻게 100 % 높이를 가질 수 있습니까? 그게 무슨 뜻 이죠? – kapa

적절한 HTML을 먼저 작성하십시오. 현재 HTML을 사용하지 마십시오. – KBN

제 생각이 나는 ... 나는 그것을 생략하지만, 그냥 궁금 단지 JQuery와의 높이를 설정할 수 있습니다 알고 반복적 인 backround 이미지를 사용할 수 있습니다. 나뿐만 아니라 이것에 대한 해결을 찾고 있었다 (일부 점과 셀에만에서 반복-Y)

출처

2012-05-05 16:57:41

이제는 그냥 divs, 게으른 오타가 있습니다. 내 말은 세 개의 div가 있고 사이에있는 하나의 div가 왼쪽 또는 오른쪽 열과 높이가 같아야한다는 것입니다. – client

. 나는 "열 개수"로 구현할 수있는 솔루션이 필요했고 다음과 같이 제시했습니다.

높이를 사용자가 원하는만큼 크게 또는 작게 (1px 작동) 설정할 수 있지만 배경에 (1px x 4px)을 추가했습니다.) 컨테이너에.

내 컨테이너 코드 (예 : 제 용기에 적용

<div class="column-two"> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum tortor sit amet ultricies ornare. Integer eu interdum augue. Pellentesque quis semper neque. Duis enim nisl, posuere in sollicitudin id, euismod vel neque. Quisque id nisi cursus, laoreet ante ut, faucibus eros. Mauris orci massa, vestibulum at ante a, semper luctus nunc. Phasellus vel nisi condimentum, congue enim et, auctor elit. Vestibulum libero neque, aliquet eget dapibus quis, ullamcorper a orci.</p> 

</div>

CSS :

가

div.column-two { 
-moz-column-count: 2; 
-moz-column-gap: 30px; 
-webkit-column-count: 2; 
-webkit-column-gap: 30px; 
background:url('images/div-2column.png') center top repeat-y; 
}

이 배경 이미지, 비주얼 수직 분할을 만드는 2 열 표시를 생성한다. 나를 위해 트릭을합니까! :)

코드

(나는 또한 동일한 높이 열을 보장하기 위해, 다음 사항을 추가했습니다. 다음은 초기 단락에서 패딩을 제거)

div.column-two p:first-of-type { margin-top:0; }

주 이전의 그 IE 브라우저는 단일 열 표시로 돌아갑니다. 이러한 특정 브라우저를 "배경 : 없음"으로 지정하면 배경이 단락 단락의 중간에 표시되지 않습니다.

출처

2013-10-07 17:24:53 matt

100 % 높이의 열 구분선을 만드는 방법

답변

관련 문제