동적 너비 백분율로 작업

Question

나는 퍼센트 레이아웃으로 작업 한 적이 없습니다. 물론, 나는 이미 그들을 연구하지만, 어떤 연습도하지 않고. 따라서 레이아웃의 스크린 샷을보고 모두에게 다음과 같이 말합니다. 동일한 레이아웃을 다른 비율의 조건으로 표시하고 마지막으로 레이아웃 품질을 잃지 않고 어떻게 표시 할 수 있습니까? div의 중첩 및 공백없이

당신이 볼 수 있듯이

, 내 레이아웃은 'OK r에. 그러나 1024x768에서는 약간의 간격이 있습니다. 반면에 1920x1080에서는 레이어 사이의 공간을 초과했습니다. 나는 이것을하기 위해 CSS를 사용하고있다. 봐 :

section#FeedDeck { 
    width: 100%; 
    height: 100%; 
    float: left; 
} 

.FeedContainer { 
    width: 100%; 
    float: left; 
    padding-bottom: 25px; 
    border-bottom: 1px solid #b9b9b9; 
} 

.LeftFeedSide { 
    width: 10%; 
    float: left; 
} 

.CenterFeedSide { 
    width: 80%; 
    float: left; 
} 

.RightFeedSide { 
    width: 10%; 
    float: right; 
    text-align: right; 
    font-size: 12px; 
} 

.RightFeedSide a { 
    width: 100%; 
    float: left; 
} 

내 HTML :

<section id="FeedDeck"> 

      <div class="FeedContainer"> 

      <div class="LeftFeedSide"> 

       <img src="60x60.jpg" alt="" /> 

      </div> 

      <div class="CenterFeedSide"> 

       <header id="FeedContent"> 
        <h1>Anne Hathaway</h1> 
        <h4>Diretora de Design</h4> 
       </header> 
       <p> 
        Can you fix a broken drug company research lab? 
       </p> 
       <p> 
        Jack Scannell, the European pharmaceuticals analyst at 
        Sanford C. Bernstein, recently held a conference on the future 
        of drug research and development. On the last day, he had representatives 
        from two of the most successful drug development organizations on the planet: 
        Sean Bohen, who heads early resaerch and development at Genentech, part of Roche, 
        which has had a legendary string of cancer drug successes; and Mads Krogsgaard Thomsen, 
        the chief scientific officer at Novo Nordisk, one of the dominant players in diabetes and 
        the best-performing big pharma stock over the past decade. This story is based on a transcript 
        of their talks. 
       </p> 

      </div> 

      <div class="RightFeedSide"> 

       <a href="#">#1</a> 
       <span>há um minuto atrás</span> 

      </div> 

     </div> 

    </section> 

Answer 1

국경이있는 DIV 컨테이너 : 1 픽셀의 빨간색 고체; 당신의 이미지에. 내가 그것을 80 %의 폭 또는 뭔가가 있다고 가정 ... 그것을 포기하려고 내가 오해 생각 max-width:1000px; 편집

aswell! 당신은 어떤 화살로 그 문제를 예증했는데 그것을 보지 못했습니다! 잠시 너를 위해 jsfiddle을 만들어라.

업데이트 - 여기가

http://jsfiddle.net/uaJCU/2/

왼쪽 열은 고정 폭이며, 나머지는 비율입니다.

HTML

<div id="container"> 
    <div id="paddingFix"> 
     <div id="left"> 
     </div> 
     <div id="right"> 
     </div> 
    </div> 
</div>​ 

CSS

#container { 
    width:90%; 
    margin:0 auto; 
    height:40px; 
} 
#paddingFix { 
    padding-left:80px; 
    position:relative; 
} 
#left { 
    position:absolute; 
    left:0px; 
    top:0px; 
    height:40px; 
    width:80px; 
    border:1px solid black; 
} 
#right { 
    height:40px; 
    border:1px solid blue; 
} 
​ 

Answer 2

레이아웃입니다 완벽하게 작동, 해상도 변경 등의 콘텐츠 만 크기가 변경됩니다. 픽셀 크기의 요소 (글꼴, 그림)는 사용하지 않아야합니다. 그렇게하면 콘텐츠가 해상도와 함께 크기가 조절됩니다.

Check this question.

Answer 3

그것은 당신이 더 큰 해상도로 확장 할 때 공백을 가지고 정상입니다; 한 가지를 이해해야합니다.

열/레이아웃에 백분율을 사용한다고해서 모든 요소가 자동으로 유동적으로되는 것은 아닙니다. 유체 이미지를 얻으려면 최대 폭 : 100 % "해킹/수정"http://www.alistapart.com/articles/fluid-images/이 필요합니다. 이렇게하면 원본 비율/비율을 유지하면서 이미지가 자동으로 축소되어 원본 크기까지 확대됩니다. http://www.gplus.gr/blog/을 확인하십시오 - 창 크기로 재생하면 의미를 알 수 있습니다.

반 유동체 배치가 중단되지 않습니다. 오른쪽 열이 너비를 변경해서는 안되며 픽셀 단위로 설정하거나 최대 너비 : 200px (예 : 이렇게하면 200px 한도까지 확장됩니다.