CSS 상속 상속

기본적으로 여기에 내 문제가 있습니다. 이 컨테이너는 renderzone의 높이를 올바르게 상속하지 않습니다. 그것은 동일하게 유지되며 실제로 악화됩니다. Renderzone은 사용자 콘텐트와 함께 동적으로 커질 것이며, chapter-list-thing에 대한 열이 있어야 내용을 배치 할 수 있습니다.CSS 상속 상속

JSFiddle 버전 - http://jsfiddle.net/K2NPz/1/

<!DOCTYPE html> 
<html> 
    <head></head> 
    <body> 
     <div id="hidden" 
      style="visibility: visible; height: auto; "> 
      <div style="height: auto;"> 
       <div id="renderzone" 
        style="background-color: #bbe4e0; padding: 5px;"> 
        <div style=" min-height: 175px;height: inherit;float: left;overflow: auto;height: 100%;"> 
         <div id="chapterlist" 
          style="float: left; width: auto; height: auto; display: inline-block; border: 1px; border-style: solid; border-radius: 10px 0px 10px 0px; min-height: 140px; min-width: 150px; margin-right: 10px; margin-top: 10px; margin-left: 10px; padding: 10px; background-color: #B9D9F1;"> 
          <a href="#render1" 
           style="display: inline-block; padding-top: 8px; padding-bottom: 8px; color: #346460; font-size: 130%;" 
           id="anchor1">Header 1</a><br> 
         </div> 
         <img src="blank.jpg" alt="White Pixel"> 
        </div> 
        <div style="background-color: white; border-radius: 10px; margin: 10px; padding: 5px; margin-right: 20px; box-shadow: 10px 10px 5px #888;"> 
         <h1 id="render1" 
          name="render1" 
          class="renderh1">Header 1<br></h1> 
         <p id="render2" 
          name="render2" 
          class="renderp">Long text here...<br> 
         </p> 
         <img id="render3" 
          name="render3" 
          class="renderimg" 
          alt="Blank Pixel" 
          src="" 
          style="max-width: 400px;"><br> 
         <a href="#top">To Top</a> 
        </div> 
       </div> 
      </div> 
      <input type="button" value="??" id="sender"> 
      <input type="button" value="??" id="modoru"> 
     </div> 
    </body> 
</html>

출처

2011-10-21 Anonymous

은 그 수평 스크롤의 광경에 싫증이 나다. 게다가 브라우저의 찾기 기능을 사용하여 CSS에서'inherit' 키워드가 전혀 발견되지 않습니다. – BoltClock

OP는 autoflow에서 내용을 유지하려고 시도하는데, 이는 'float'할당 때문에 달성되지 않았다고 생각합니다. – Marnix

모든 인라인 스타일에 대해 죄송합니다. 그것은 HTML 이메일 생성기를위한 것이므로 불행히도 외부 스타일 시트의 해당 위치에서 사용해야합니다. 또한, 내 코드가 편집되었습니다. –

overflow:auto에 스타일을 설정하십시오. 당신이 그것을 부유시키기 때문에, 그것은 범위를 벗어납니다. 오버플로로 배치하면 범위에서 반환됩니다.

출처

2011-10-21 17:30:46 Marnix

요소가 부동 상태인지 또는 부동 상태인지 여부에 따라 상위 요소에서 속성을 상속하는 기능이 변경되지 않습니다. – BoltClock

사실,하지만 OP는 콘텐츠의 크기에 자동 스트레치에 대해 이야기하고 있습니다. 스타일 속성에서 볼 수 있듯이 상속 할 실제 높이 속성은 없습니다. – Marnix

방금 오버플로를 편집하고 doctype없이 작동하지만 doctype을 사용하면 어떤 이유로 실패합니다. 어떤 아이디어? –

부동 요소는 중심 콘텐츠의 높이를 알지 못하기 때문에 상속 높이에 문제가 있습니다.

최악의 방법 명확 삽입 DIV에 의해 마지막 자식 요소 후 부유물이 (대신 사업부 <span class="clear"></span>의 걸쳐도 사용할 수 있습니다).

.main { 
 
    background-color: blue; 
 
    width: 200px; 
 
} 
 
.floated { 
 
    width: 250px; 
 
    height: 150px; 
 
    float: left; 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div class="main"> 
 
    <div class="floated"></div> 
 
    <div class="floated"></div> 
 
    <div class="floated"></div> 
 
    <div class="clear"></div> 
 
</div>

더 나은 방법 : - 부모 DIV에 대한 overflow: hidden.

만약 자식 요소가 뜨면 부모 div를 삭제해야합니다. 여백이 적절하게 작동하고 지저분한 html 요소를 생성하지 않습니다.

.main { 
 
    background-color: blue; 
 
    width: 200px; 
 
    overflow: hidden 
 
} 
 
.floated { 
 
    width: 250px; 
 
    height: 150px; 
 
    float: left; 
 
}

<div class="main"> 
 
    <div class="floated"></div> 
 
    <div class="floated"></div> 
 
    <div class="floated"></div> 
 
</div>

출처

2014-11-20 12:58:42 user1597594

CSS 상속 상속

답변

관련 문제