Question

有没有办法用纯css填充元素行之间的垂直空白？

您将在我的片段中看到浮动元素在它们之间有垂直的空间，我已经制作了红色。我已经尝试过csscolumns，flexbox，cssgrid，floating，tables，但我还是无法让它们填满垂直空间。

有没有人看到或知道用css填充此垂直空间的方法？

＆＃13;

public class TwoPlayers extends AppCompatActivity implements 

View.OnClickListener {

private Button start, start2;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.two_players);

    start = (Button) findViewById(R.id.buttonStart);
    start2 = (Button) findViewById(R.id.buttonStrat2);

    start.setOnClickListener(this);
    start2.setOnClickListener(this);
}
@Override
public void onClick(View v) {

    if((v == start)&&(v == start2)){
        start.setVisibility(View.GONE);
        start2.setVisibility(View.GONE);
        ...

＆＃13;

.container {
  display: block;
  background-color: red;
}
.container:after {
  display: table;
  content: "";
  clear: both;
}
.cell {
  width: 25%;
  background-color: white;
  float: left;
}

＆＃13;

更新

我尝试使用csscolumns来实现这一点但是，我发现列会自动尝试并保持相同的高度，并且子元素将会中断。我需要将子元素垂直地保持在一起，而不要分成另一列。

您可以在下面看到子元素断开的位置，因为绿色边框不在那里。

＆＃13;

<div class="container">
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
</div>

＆＃13;

.container {
  display: block;
  columns:4;
  column-gap: 0;
  background-color: red;
}
.cell {
  min-width: 40px;
  background-color: white;
  float: left;
  border:1px solid green;
}

＆＃13;

Answer 1

您可以使用 CSS列 执行此操作：

.container {
  column-count: 4; /* each 25% */
  column-gap: 5px; /* horizontal gap, adjust to your needs */
}

.cell {
  margin-bottom: 5px; /* for better presentation, adjust to your needs */
  page-break-inside: avoid; /* mandatory */
  break-inside: avoid-column; /* mandatory */
  background: Lavender;
}

<div class="container">
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
</div>

填充浮动元素的垂直白色空间

更新

1 个答案: