어떻게 두 개의 상자가 서로

-1

아래에 두 개의 인라인 블록 상자를 넣어 각각의 하나는 내가 다음과 같은 이미지어떻게 두 개의 상자가 서로

처럼, 서로 아래에 두 개의 인라인 블록 상자를 넣을 인라인 블록되는 여기에 내가 당신을 취소 번째 상자에서

.box1 
 
\t { 
 
    background-color: red; 
 
    display: inline-block; 
 
    width: 300px; 
 
    float: right; 
 
    height: 31%; 
 
\t } 
 
    
 
    .box2 
 
    { 
 
    background-color: green; 
 
    display: inline-block; 
 
    width: 324px; 
 
    float: right; 
 
    height: 31%; 
 
    }

<body> 
 

 
    <div class="box1">Box1</div> 
 
\t \t <div class="box2">Box2</div> 
 

 
</body>

출처

2017-03-07 saifaldeen

왜 당신은 그들이 인라인 싶지 않아하는 인라인 경우? – Quentin

옆에 물건을 원하지 않으면 왜 떠 다니는거야? – Quentin

두 div 사이에 HTML에 '
'을 추가하는 것으로 간주됩니까? – sideroxylon

를 사용하는 코드는. clear: both을 추가하십시오.

코드 조각은 :

.box1 { 
 
    background-color: red; 
 
    display: inline-block; 
 
    width: 300px; 
 
    float: right; 
 
    height: 31%; 
 
} 
 

 
.box2 { 
 
    clear: both; 
 
    background-color: green; 
 
    display: inline-block; 
 
    width: 324px; 
 
    float: right; 
 
    height: 31%; 
 
}

<body> 
 

 
    <div class="box1">Box1</div> 
 
    <div class="box2">Box2</div> 
 

 
</body>

출처

2017-03-07 09:33:05 Pugazh

하나의 관찰. ''inline-block '은 사실상''블록''이됩니다. –

당신은 컨테이너에 div가 모두 마무리하고 대신에 플로트 수 있습니다.

예를

.container { 
 
    float: right; 
 
} 
 

 
.box1 { 
 
    background-color: red; 
 
    width: 300px; 
 
    height: 31%; 
 
} 
 

 
.box2 { 
 
    background-color: green; 
 
    width: 324px; 
 
    height: 31%; 
 
}

<body> 
 
<div class="container"> 
 
    <div class="box1">Box1</div> 
 
    <div class="box2">Box2</div> 
 
</div> 
 
</body>

출처

2017-03-07 09:33:46 sol

는 단지 추가 할 수 있습니다 것 같다 "분명히 : 모두;" 두 번째 div로 이동하고 그렇지 않으면 코드를 그대로 두십시오.

.box1 
 
\t { 
 
    background-color: red; 
 
    display: inline-block; 
 
    width: 300px; 
 
    float: right; 
 
    height: 31%; 
 
\t } 
 
    
 
    .box2 
 
    { 
 
    background-color: green; 
 
    display: inline-block; 
 
    width: 324px; 
 
    float: right; 
 
    height: 31%; 
 
    clear: both; 
 
    }

<body> 
 

 
    <div class="box1">Box1</div> 
 
\t \t <div class="box2">Box2</div> 
 

 
</body>

출처

2017-03-07 09:34:25 tofraser

어떻게 두 개의 상자가 서로

답변

관련 문제