인라인 블록 3 열 레이아웃을 만드는 방법

인라인 블록 레이아웃을 만드는 가장 좋은 방법은 두 개가 오른쪽으로 밀리는 세 개의 열로 구성되는 것입니다. 칼럼의 너비를 자동으로 설정하려면 어떻게해야합니까?인라인 블록 3 열 레이아웃을 만드는 방법

HTML

<div class="wrap"> 
    <div class="col1">left column needs to stay left 
    </div> 
    <div class="col2">middle goes to the right 
    </div> 
    <div class="col3">right please 
    </div> 
</div>

CSS

.wrap { 
    width: 800px; 
    height: 50px; 
    font-size:0; 
    border: 1px dotted green; 
} 
.wrap div { 
    display: inline-block; 
    font-size: 14px; 
    padding: 10px; 
} 

.col1 { 
    background: red; 
} 
.col2 { 
    background: blue; 
} 
.col3 { 
    background: yellow; 
}

http://jsfiddle.net/muriz/wrykjjs8/

출처

2015-01-25 JaneVi

미래에는 관련된 모든 코드를 게시물에 포함하고 ** CodePen에 대해 다소 모호한 말로 언급하지 마십시오. 귀하의 게시물은 다른 리소스에서 독창적이어야합니다. –

자동으로 사용하려는 열은 무엇입니까? 자동을 정의하십시오. 인라인 블록이 필요한 이유는 무엇입니까? – David

여기에 codepen을 포함시킬 수 없다는 것을 알지 못했습니다. 질문을 편집했습니다. – JaneVi

.col1,.col2,.col3{ 
 
\t float:left; 
 
\t width:30%; 
 
} 
 
#col1{ 
 
\t background-color:red; 
 
\t } 
 
#col2{ 
 
\t background-color:green; 
 
\t } 
 
#col3{ 
 
\t background-color:blue; 
 
\t }

<div id="wrap"> \t 
 
     <div id="col1" class="col1"> left column left column left column left column left    column left column left column 
 
     </div> 
 
\t 
 
     <div id="col2" class="col2"> 
 
     center column center column center column center column center column center column   center column center column 
 
     </div> 
 
\t 
 
     <div id="col3" class="col3"> 
 
      right columnright column right column right column right column right column    right column right column 
 
     </div> 
 
</div>

희망이 도움이 너 .. ..

출처

2015-01-25 05:44:53 vickisys

인라인 블록 3 열 레이아웃을 만드는 방법

답변

관련 문제