2017-10-23 4 views
-3

둘 사이의 경계선에 문제가있어 divs과 내가 필요한 코드를 제공하는지 여러 가지 코드 조각을 시도했습니다. 예를 들어, divs 사이에 새로운 <div >을 사용하여 보았습니다. 수직 경계선을 넣길 원하지만 정보를 올바르게 입력하고 있다고 생각하지 않습니다. CSS 시트에 코드를 추가해야하지만 정확하게 표시되어야한다고 생각합니다. 적절한 방법은 무엇입니까?두 div 사이에 세로 경계선을 설정하는 방법은 무엇입니까?

다음 코드를 고려하십시오. #content#sidebar 사이에 세로선을 추가하면 어떻게 될까요? 텍스트가있는 경우 두 요소를 구분하는 수직선이라고 할 수 있습니다.

<div id="container"> 
     <div id="header"> 
      header content here 
     </div> 

     <div id="content"> 
      main content here 
     </div> 

     <div id="sidebar"> 
      sidebar content here 
     </div> 

     <div id="footer"> 
      footer content here 
     </div> 

    </div> 

============= CSS의 ============ 여기

#container { 
    width: 960px; 
    margin: 20px auto; 
} 

#header { 

} 

#content { 
    float: left; 
    width: 620px; 
} 

#sidebar { 
    float: left; 
    width: 340px; 

} 

footer { 
    clear: both; 
} 

는이 코드가 어떻게 보일지에 이미지입니다 텍스트 Example with text of code given above

그래서 기본적으로 왼쪽 단락과 오른쪽 단락 사이에 테두리를 추가하는 방법을 알아 내려고하고 있습니다.

나는 그것의 이해할 수 있고 나의 질문이 충분히 희망적이다.

감사합니다.

+1

border-left 및 border-right라는 멋진 CSS 속성이 있습니다. 체크 아웃하여 문제를 해결하십시오. https://www.w3schools.com/cssref/pr_border-left.asp – pegla

답변

0
당신은 당신의 #content에 #sidebar에 border-left-style: solid; 또는 사용 border-right-style: solid;을 사용할 수 있습니다

+0

테두리 왼쪽 스타일 추가 : 고체; 사이드 바를 옆쪽에있는 대신 내용 아래로 이동하게했습니다. border-right-style과 같은 것 : 단색; 그러나 나는 경계 - 오른쪽 스타일을 사용하기로 결정했다. 내 #content에서 내 #sidebar의 너비를 변경하면 효과가있었습니다. 고맙습니다! –

-1

나는 아이디어가 있지만 얼마나 잘 작동하는지 잘 모르겠습니다. 과 같이 테두리 왼쪽 CSS 속성을 하나 개의 사업부로 '지금 접속'버튼을 아래로 '이름'입력을 넣어 정의 :

 
`.mydiv{ 
border-left: thick double #777; 
}`