div의 여러 행 만들기

Question

4 div 요소로 구성된 2x2 설정을 만들고 싶습니다. 지금까지 내 테스트를 위해 fiddle을보고 내 디스플레이에 inline-block을 사용합니다. 나는 "div 3"과 "div 4"를 각각 1과 2 바로 아래에두고 싶습니다. 수레없이 이것을 할 수있는 방법이 있습니까?

HTML :

<div class = "blocks"> 
    div 1 
</div> 

<div class = "blocks"> 
    div 2 
</div> 

<div class = "blocks"> 
    div 3 
</div> 

<div class = "blocks"> 
    div 4 
</div> 

CSS :

.blocks { 
    display: inline-block; 
    border: solid 1px red; 
    width: 100px; 
} 

Answer 1

은 컨테이너 사업부에서 블록을 넣고 그것을 고정 폭을 제공합니다.

이 같이

.wrap{ 
    width:210px; 
} 

<div class='wrap'> 
    <div class = "blocks">div 1</div> 
    <div class = "blocks">div 2</div> 
    <div class = "blocks">div 3</div> 
    <div class = "blocks">div 4</div> 
</div> 

Fiddle

Answer 2

http://jsfiddle.net/QXqEG/7/

?

<div style="width: 210px;"> 
    <div class = "blocks"> 
    div 1 
</div> 

<div class = "blocks"> 
    div 2 
</div> 

<div class = "blocks"> 
    div 3 
</div> 

<div class = "blocks"> 
    div 4 
</div> 
</div> 

Answer 3

div는 고정 폭이라고 가정합니다. 포함하고있는 요소로 간단히 감싸고 그 요소의 폭을 제한하여 한 줄에 2 개만 들어갈 수 있도록하십시오. 이것은 쉽게 3 너비 또는 4 너비 현명한 또는 그 문제에 대해 그렇게 선택에 맞게 수정할 수 있습니다.

상자 크기가 100PX라고 가정 할 때 JSFiddle이 있습니다.

http://jsfiddle.net/QXqEG/4/

CSS :

.container { width: 210px; } 

HTML :

<div class="container"> 
<div class = "blocks"> 
    div 1 
</div> 

<div class = "blocks"> 
    div 2 
</div> 

<div class = "blocks"> 
    div 3 
</div> 

<div class = "blocks"> 
    div 4 
</div> 
</div><!-- end container --> 

Answer 4

당신은 당신이 원하는 2 × div의를 포함하는 <div>을 만들 수 있습니다. 이처럼

:

HTML

<div id="column"> 
    <div class = "blocks"> 
    div 1 
    </div> 

    <div class = "blocks"> 
    div 2 
    </div> 

    <div class = "blocks"> 
    div 3 
    </div> 

    <div class = "blocks"> 
    div 4 
    </div> 
</div> 

CSS

#column { 
    position: absolute; 
    width: 210px; height: 100%; 
    border: 1px solid #000 
} 

이 jsFiddle

Answer 5

당신이 t에서 원하는 블록을 포장 참조 그는 div와 동일한 행을 어쩌면 그들의 넓이로 놀 수 있습니다.

<div class="row"> 
    <div class = "blocks"> 
    div 1 
    </div> 

    <div class = "blocks"> 
    div 2 
    </div> 
</div> 

<div class="row"> 
    <div class = "blocks"> 
    div 3 
    </div> 

    <div class = "blocks"> 
    div 4 
    </div> 
</div> 

Answer 6

많은 방법이 있습니다. 한 가지 방법은 div 2와 div 3 사이에 <br /> 태그를 간단히 광고하는 것이고, 다른 하나는 모든 행을 다음과 같이 새 <div>에 중첩하는 것입니다. 그것은 당신이 무엇을 할 계획인지에 달려 있습니다.

<div id= "row1"> 
    <div class = "blocks"> 
     div 1 
    </div> 

    <div class = "blocks"> 
     div 2 
    </div> 
</div> 

<div id= "row2"> 
    <div class = "blocks"> 
     div 3 
    </div> 

    <div class = "blocks"> 
     div 4 
    </div> 
</div>