DONT가 고정 된 왼쪽과 오른쪽 요소 사이에 남은 공간을 div로 채우십시오.

Question

Ok ... 두 div 사이의 나머지 공간을 채우는 방법에 대해 비슷한 질문이 많이 있습니다. 그러나 왼쪽과 오른쪽의 요소가 항상 같은 너비에 속해 있지 않아야하기 때문에 그 중 아무 것도 나를 위해 작동하지 않습니다. 나는 그것이 의미가 있기를 바랍니다. 여기

내 HTML입니다 :

<section id="recent-news-posts" class="light-gray-section"> 
    <h1> 
     <div class="h1-first"> 
      Recent 
     </div> 
     <div class="h1-second"> 
      NewsPosts 
     </div> 
    </h1> 
    <div class="line">&nbsp;</div> 
    <div class="green-button">Read All News</div> 
    <div class="content"> 
     Content 
    </div> 
</section> 

그리고 여기에 내가 현재 가지고있는 CSS입니다 : 사이

이

.light-gray-section { 
    background-color:#e4e0db; 
    display:block; 
    margin:0px; 
} 

    .light-gray-section h1 { 
     text-shadow: 2px 2px 2px rgba(0,0,0,0.3); 
     font-weight: 500; 
     padding-left: 30px; 
     padding-top: 30px; 
     padding-bottom: 15px; 
     margin:0px; 
     float:left; 
    } 

     .light-gray-section h1 .h1-first { 
      color:#142114; 
      display:inline; 
     } 

     .light-gray-section h1 .h1-second { 
      color:red; 
      display:inline; 
     } 

    .light-gray-section .line { 
     display:inline-block; 
     height: 45px; 
     width:100px; 
     margin-left: 10px; 
     margin-right: 10px; 
     border-bottom: 3px solid #9ec096; 
    } 

    .light-gray-section .green-button { 
     float:right; 
     /* IE10 Consumer Preview */ 
     background-image: -ms-linear-gradient(top, #4C9444 0%, #2D5E27 100%); 
     /* Mozilla Firefox */ 
     background-image: -moz-linear-gradient(top, #4C9444 0%, #2D5E27 100%); 
     /* Opera */ 
     background-image: -o-linear-gradient(top, #4C9444 0%, #2D5E27 100%); 
     /* Webkit (Safari/Chrome 10) */ 
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4C9444), color-stop(1, #2D5E27)); 
     /* Webkit (Chrome 11+) */ 
     background-image: -webkit-linear-gradient(top, #4C9444 0%, #2D5E27 100%); 
     /* W3C Markup, IE10 Release Preview */ 
     background-image: linear-gradient(to bottom, #4C9444 0%, #2D5E27 100%); 
     border-radius: 5px; 
     padding:5px 10px 5px 10px; 
     color:white; 
     margin-right:30px; 
     margin-top:30px; 
     float:right; 
    } 

    .light-gray-section .content { 
     padding-left: 30px; 
     padding-right: 30px; 
     padding-bottom: 30px; 
     clear:both; 
    } 

내가 선이 100 공간의 % (마이너스 마진)를 입력 할을 h1과 오른쪽에있는 버튼이 있지만 살인자는 h1과 버튼 내용이 (내 asp.net 응용 프로그램에서) 매우 넓게 바뀔 수 있으므로 변경할 필요가 있기 때문에 모든 너비를 하드 코드 할 수 없다는 것입니다. . 비슷한 레이아웃에서 찾은 모든 솔루션은 너비를 왼쪽 및 오른쪽 요소에 하드 코딩해야합니다.

이 코드가 문맥, lol에서 작동되기를 바랍니다. 지금 당장은 중간에 선의 너비가 100px로 하드 코딩되어 있으므로 올바른 위치에 나타나고 여전히 볼 수 있습니다. 너비 : 100 %를 시도하면 내용이 포함 된 섹션만큼 넓어지고 다음 줄로 넘어 가서 그 다음에 줄을 푸시합니다.

테이블 셀에 의존 할 필요가 없기를 바란다 ... 중간 셀의 너비를 100 %로 설정하면이 방법이 효과가 있다고 가정한다 (시도하지는 않았지만).

Answer 1

및 지정하지 않은 width이지만 overflow: hidden을 대신 입력하십시오. 데모 : http://jsfiddle.net/M3Lt4/

Answer 2

이 약

어떻게 있습니다 .. HTML은 "녹색 버튼"태그 (두 수레가 먼저 와야) 라인 태그 앞에 와야에서

<section id="recent-news-posts" class="light-gray-section"> 
<h1> 
    <div class="h1-first"> 
     Recent 
    </div> 
    <div class="h1-second"> 
     NewsPosts 
    </div> 

</h1> 
<!--div class="line">&nbsp;</div--> 
<br /><hr align="center" width = "88%" size="1" /> 
<div class="green-button">Read All News</div> 
<div class="content"> 
    Content 
</div>