divs 자동 채우기 공간 만들기

Question

여기 내 div와 관련된 문제를 파악하려고 노력했습니다. 내 디자인을 실제 레이아웃으로 바꾸는 방법, 그리고 연구 나 구현에 많은 행운이 없었습니다. 첨부 된 링크에서 // PORTFOLIO가 표시되고 콘텐츠 영역의 가장자리까지 확장되는 선은 빨간색 선이 표시됩니다. 지금은 // 특정 픽셀 너비로 설정된 // PORTFOLIO 및 red line div가 있지만 두 div가 자동으로 너비를 설정할 수있게하려고합니다. (너비에 따라 너비를 자동으로 설정하는 첫 번째 // 제목은 컨테이너에 남아있는 공간을 채우는 두 번째 것입니다.) 웹 사이트의 다른 섹션이 똑같은 일을하고 각 영역을 구체적으로 측정하고 싶지 않기 때문에 두 번째 컨테이너가 나머지 공간을 채 웁니다. 모든 제안을 환영합니다, 정말 고마워요!

Example

Answer 1

참조 :http://jsfiddle.net/GmtMK/1/가 (브라우저 윈도우의 너비를 변경)

<div id="columnA"> 
    <div id="title">//Portfolio</div> 
    <div id="line"></div> 
</div> 

#columnA { 
    font-family: 'ProximaNovaRegular', Geneva, sans-serif; 
    font-size: 19px; 
    text-transform: uppercase; 
    color: #C10000; 
    margin-bottom: 20px; 
    letter-spacing: 4pt; 
} 
#title { 
    float: left 
} 
#line { 
    overflow: hidden; 
    height: 9px; 
    border-bottom: 1px solid #c10000; 
} 

Answer 2

먼저, 저를 당신의 웹 사이트에 당신을 보완하자, 그것은 좋은 세련된 보인다!

<div id="columnA"> 
    <div id="title">//Portfolio</div> 
    <div id="line"><hr /></div> 
</div> 

#columnA { 
    width: 400px; 
    display:table; 
} 
#title { 
    display:table-cell; 
    width: 175px; 
} 
#line { 
    display:table-cell; 
    width: auto; 
} 
hr { 
    background-color: #C10000; 
    height: 1px; 
    border: 0; 
} 

전체 예제를 참조하십시오 : 둘째, 나는 그러나, 그것은 <hr /> 요소를 추가하는 것은 당신이 고르지 높이의 세포를 못하게입니다 필요 display: table CSS 속성을 사용하여, 당신을위한 해결책을 가지고 http://jsfiddle.net/GmtMK/