擦除2个块之间的垂直空白区域

Question

我有两个面板，panel1是浮动左边有固定宽度，panel2将取剩余宽度。在panel2中，我有多个框，也有2个小会话，会话1是左浮动，另一个是剩余宽度。我遇到的问题是第一个框和第二个框之间的垂直空白区域，如代码段所示。我发现面板的长度导致了这个问题。如何通过擦除第一个框和第二个框之间的空白来解决此问题？

＆＃13;

＆＃13;

.prefix-clear:after {
	display: table;
	content: "";
	clear: both;
}

.box-1 {
  float: left;
  width: 50px;
  background: red;
}

.box-2 {
  margin-left: 50px;
  padding: 5px;
  background: green;
}


.left {
  float: left;
  width: 50px;
  background: red;  
}


.box-2 {
  margin-left: 50px;
  background: yellow;
}

＆＃13;

<div class="prefix-clear">
<div class="box-1">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>
<div class="box-2">
  
  <div class="box prefix-clear">
    <div class="left">box</div>
    <div class="right">1</div>
  </div>
  <div class="box prefix-clear">
    <div class="left">box</div>
    <div class="right">2</div>
  </div>
  <div class="box prefix-clear">
    <div class="left">box</div>
    <div class="right">3</div>
  </div>
</div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您只想删除空格，请尝试display: table-column;申请prefix-clear:after。更重要的是，我们可能需要一个模型来看看你想要达到的目标。