如何将两个inline-block的箱子海誓山盟

-1

下面我有两个盒子每一个是inline-block的，我想将两个inline-block的盒相互之下，像下面的图片如何将两个inline-block的箱子海誓山盟

下面是我用

.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

一个观察。实际上浮动的“内联块”变成了“块”。 –

你可以在一个容器包装既您的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

如何将两个inline-block的箱子海誓山盟

回答

相关问题