Question

我有两个盒子，每个盒子是一个内联块，我想把两个内嵌块盒放在彼此之下，如下图所示

这里是我使用的代码

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

在第二个框中清除float。只需添加clear: both。

代码段：

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 2

你可以将你的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>

Answer 3

好像你可以添加一个“clear：both;”到你的第二个div，否则你的代码保持原样。

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

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

如何将两个内嵌块框放在彼此之下

3 个答案: