유체 레이아웃 문제

내 HTML 파일은 다음과 같습니다.유체 레이아웃 문제

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>Fluid Layout</title> 

    <link rel="stylesheet" href="styles.css"> 

</head> 
<body> 

<div class="container"> 

    <div class="row"> 

     <div class="columns four">four four four four four four four four four four four four four four four four four four four four four</div> 

     <div class="columns four">four</div> 

     <div class="columns four">four</div> 

     <div class="columns four">four</div> 

    </div><!--/row--> 


    <div class="columns eight">eight</div> 

    <div class="columns eight">eight</div> 


    <div class="columns six">six</div> 

    <div class="columns eight">eight</div> 

    <div class="columns two">two</div> 


    <div class="columns sixteen">sixteen</div> 


</div><!--/container--> 

</body> 
</html>

내 CSS 파일입니다.

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 

    margin: 0; 
    padding: 0; 
    -webkit-font-smoothing: antialiased; 
} 

body { 
    font: 12px/1.5em /* Notation: font-size/line height */ Helvetica, Arial, sans-serif; 
    color: #313131; 
} 

.container { 
    width: 90%; 
    margin: 0 auto; 
    background: rgba(115,150,209,0.67); 
} 

.row { 
    width: 100%; 
    float: left; 
    clear: both; 
} 

.container .columns { 
    float: left; 
    background: tomato; 
    margin: 0 0 1em; 
    text-align: center; 
    padding-right: 1em; 
    padding-left: 1em; 
} 

.container .columns.one   { width: 6.25% } 
.container .columns.two   { width: 12.5% } 
.container .columns.three  { width: 18.75% } 
.container .columns.four   { width: 25%  } 
.container .columns.five   { width: 31.25% } 
.container .columns.six   { width: 37.5% } 
.container .columns.seven  { width: 43.75% } 
.container .columns.eight  { width: 50%  } 
.container .columns.nine   { width: 56.25% } 
.container .columns.ten   { width: 62.5% } 
.container .columns.eleven  { width: 68.75% } 
.container .columns.twelve  { width: 75%  } 
.container .columns.thirteen  { width: 81.25% } 
.container .columns.fourteen  { width: 87.5% } 
.container .columns.fifteen  { width: 93.75% } 
.container .columns.sixteen  { width: 100%  } 


.clearfix:after, 
.container:after { 
    content: ''; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; 
    clear: both; 
} 

.clearfix, 
.container { 
    zoom: 1; 
}

어떤 이유로 든 행 클래스의 모든 항목의 너비가 100 %임을 지정해야합니다. 상위 요소를 채우기 위해 모든 항목을 확장해야하지 않습니까?

어떤 통찰력에도 감사드립니다.

출처

2014-04-04 user3499343

div 너비에 대해서는 절대적으로 맞습니다. 기본적으로 div는 너비의 100 %를 채 웁니다 (그리고 여백/여백을 수용합니다). 이는 기본 CSS 값 display:block; 때문입니다. .row 클래스에 CSS 변경 사항이 필요하지 않습니다. JSFiddle

주 등 특정 폭 값을 작업 할 때 DIV HTML 태그 사이의 공백이 매우 중요하다 :

나는 이것이 당신이 뭘 하려는지 믿습니다. 필자는 예제에서 div 사이의 공백을 모두 제거했습니다 (모두 필요하지는 않음).

필자는 개인적으로이 효과를 효율적으로 수행 할 수있는 방법, 특히 반응 형 디자인이 필요하다고 생각합니다. 관심이 있으시면 알려주세요.

출처

2014-04-04 19:26:40

유체 레이아웃 문제

답변

관련 문제