divs의 동작 이해 및

저는 HTML과 CSS 및 스택 오버플로 커뮤니티에 익숙하지 않습니다. 과제 중 하나에 대해 컨테이너 <div>에 서로 <div>을 균등하게 배치해야합니다. 내측 <div> 각각에 대해 float:left을 사용했습니다. 하지만 그렇게하면 바깥 쪽 (컨테이너) div가 최상위로 끝까지 축소됩니다. 내가 이해해야 할 것은 부유 요소가 정상적인 흐름에 배치 된 후 콘텐츠와 요소의 정상적인 흐름에서 벗어났다는 것입니다.
플로팅 요소의 작업 스타일은 물론 display:inline-block도 이해해야합니다. 어떤 도움이라도 대단히 감사하겠습니다. 가장 간단한 형태의 샘플 태그는 다음과 같습니다divs의 동작 이해 및

<style> 
#xouter{ 
    width:80%; 
    margin-left:9%; 
    border:1px solid #000; 
} 
#xleftcol{ 
    float: left; 
    width: 33%; 
    background:#809900; 
} 
#xmiddlecol{ 
    float: left; 
    width: 34%; 
    background:#eff2df; 
} 
#xrightcol{ 
    float:left; 
    width: 33%; 
    background:#d2da9c; 
} 
</style> 
    <body> 
     <div id="xouter"> 
      <div id="xleftcol"> 
      This is the left col : This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col 
      </div> 
      <div id="xmiddlecol"> 
      This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: 
      </div> 
      <div id="xrightcol"> 
       This is the rightcol : This is the rightcol : This is the rightcol : This is the rightcol : This is the rightcol : This is the rightcol : This is the rightcol :: 
      </div> 
     </div> 

    </body>

This is a screen shot of what I have: 1- 3 divs with no floating or display property set 2- the same divs but with float-left property 3- lastly, with display:inline-block property (no floating property)

출처

2017-04-24 Mani Malhotra

css의'.'는'클래스'를 참조하고'# '은'id'를 참조합니다. https://codepen.io/anon/pen/BRLmRV –

질문이 있습니까? 질문이 뭐야? – garek007

당신은 하나 float:left/right 또는 display:inline-block, 둘을 사용하고 싶습니다.

CSS의 float:left 줄 3 개를 display:inline-block으로 변경하면 원하는 결과를 얻을 수 있습니다.

편집 : Michael Coker가 CSS의 .classname으로 HTML의 ID가 일치하지 않는다고 올바르게 지적했습니다.

출처

2017-04-24 16:06:24 smekosh

내 코드를 엉망으로 만들었지 만 smekosh에게 답변 해 주셔서 감사합니다. 당신의 제안은 효과가 있었고 더 가까이 나아갔습니다. 이제 내부 div는 외부 div 내부에 잘 맞습니다. 유일한 문제는 상단 테두리와는 달리 div의 하단 경계선과 일치한다는 것입니다. –

CSS에서 마침표는 파운드 기호로 바꿔야합니다. 기간은 클래스를 나타냅니다. 파운드 기호는 ID를 나타냅니다. 귀하의 마크 업은 ID를 사용하지만 귀하는이를 CSS의 클래스로 참조하고 있습니다.

출처

2017-04-24 16:07:23 KeplerIO

내 사과 ... 초보자 실수 : ( –

divs의 동작 이해 및

답변

관련 문제