만드는 방법 3 열 레이아웃

Question

나는 다음과 같은 HTML 파일이 있습니다 등등

<!-- this is column 1 --> 
<div class="repairGuruBoxRC"> 
    <p>Hi</p> 
    <p>hello</p> 
</div> 
<img src="http://www.google.com" /> 

<!-- this is column 2 --> 
<div class="repairGuruBoxRC"> 
    <p>Hi</p> 
    <p>hello</p> 
</div> 
<img src="http://www.google.com" /> 

<!-- this is column 3 --> 
<div class="repairGuruBoxRC"> 
    <p>Hi</p> 
    <p>hello</p> 
</div> 
<img src="http://www.google.com" /> 

하고 .. 나는 이것이 내가 사업부/IMG 조합 대신 3 열로 분할 한 스타일을 어떻게

을 단 하나의 열에요? 이미지 위에 텍스트 (<p>'s>) 대신 텍스트를 이미지의 오른쪽에 표시하려면 어떻게 변경합니까? 그래서 결국 6 열이 있고, 3 열은 이미지이고 3 열은 텍스트입니다. 이처럼

Answer 1

:

<style type="text/css"> 
.column, .repairGuruBoxRC, .image {float:left;} 
.column {width:200px;} /* not essential, a div will expand to the size of the content inside it */ 
.repairGuruBoxRC, img.image{ 
    width:100px; 
    height:100px; 
} 

</style> 

<!-- this is column 1 --> 
<div class="column"> 
<img class="image" src="http://www.google.com"/> 
<div class="repairGuruBoxRC"> 
    <p>Hi</p> 
    <p>hello</p> 
</div> 
</div> 

<!-- this is column 2 --> 
<div class="column"> 
<img class="image" src="http://www.google.com"/> 
<div class="repairGuruBoxRC"> 
    <p>Hi</p> 
    <p>hello</p> 
</div> 
</div> 

<!-- this is column 3 --> 
<div class="column"> 
<img class="image" src="http://www.google.com"/> 
<div class="repairGuruBoxRC"> 
    <p>Hi</p> 
    <p>hello</p> 
</div> 
</div> 

당신은 CSS 플로트 속성을 확인 할 수 있습니다