기존 웹 사이트를 유체 그리드 레이아웃으로 변환

Question

웹 사이트가 있습니다. 웹 사이트를 유체 그리드 레이아웃으로 변환 할 수 있습니까? 이 도구를 자동화하거나 Dreamweaver에서 유체 격자를 만들고 <div> 태그를 삽입하고 마지막으로 내 웹 사이트를 닮은 스타일을 삽입해야합니다.

Answer 1

기존의 유체 그리드 레이아웃에서 유체 그리드 레이아웃을 생성하는 도구는 없습니다. 이는 아마도 그러한 도구가 어떤 그리드 구조를 사용해야하는지 결정하기가 어려울 것이기 때문일 것입니다. 그리드를 사용할 때 열의 크기가 고정되어 있으므로 픽셀 단위로 정확한 CSS 스타일을 사용하여 작성한 CSS와 모양이 다를 수 있습니다.

나는 많은 프레임 워크를보고 있지만 어떤 것이 좋습니다. 그들은 정말 사용하기 쉽고 div 태그에 클래스 이름을 추가하기 만하면됩니다. 유체 그리드의

목록 Bootstrap

FluidBaseline

사람들의 만 더 같이있다

CSSGrid

Fluid 960

을 프레임 워크입니다. 어떤 번거 로움없이 쉽게 구현할 수있는 그리드 시스템을 찾고 있다면 Fluid960을 사용하십시오.

편집 당신이 16 열로 100 %를 취할 필요가 16 표 (960) 프레임 워크의 경우 다음과 같은 구조

<div style="width:100%"> 
<div style="width:20%>First div</div> 
<div style="width:30%>Second div</div> 
<div style="width:50%>Third div</div> 
</div> 

했다 말할 수 있습니다. 따라서 20 % (첫 번째 div)는 3 그리드 열, 30 %는 5 그리드 열, 50 %는 8 그리드 열이어야합니다. 이제 3 + 5 + 8 = 16 열이 있습니다. HTML 형식으로 쓰면 끝이납니다.

<div id="grid"> 
<div class="grid_3"></div> 
<div class="grid_5"></div> 
<div class="grid_8"></div> 
</div> 

그리고 끝났습니다!