CSS图像未正确对齐而留下空白空间

Question

除了显示问题之外，我不知道如何解释这一点。我有以下代码：

    private void bindTimes()
    {
        taskTimesSource.DataSource = Program.timesheetListI;
        gridTimes();
    }

    private void gridTimes()
    {
        timesGrid.AutoGenerateColumns = true;

        DataGridViewCell cell = new DataGridViewTextBoxCell();
        DataGridViewTextBoxColumn ID = new DataGridViewTextBoxColumn()
        {
            CellTemplate = cell,
            Name = "idColumn",
            HeaderText = "ID",
            DataPropertyName = "taskTitle"
        };

        timesGrid.Columns.Add(ID);
    }

我得到以下结果：

我想要得到的图像是＆＃34;填写所有空格＆＃34;

像这样：

我能够在第二个屏幕上使用一系列技巧来实现这一点，这些技巧不允许我使用我当前的样式来工作。

有人可以指导我用这个CSS做错了什么来获得我想要的结果吗？

谢谢！ JAC

Answer 1

使用masonry jquery库来解决问题：

1. 包括砌体

   script src =“/ path / to / masonry.pkgd.min.js”

2.如果您有以下html：

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

3.然后你的脚本应该是：

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 200
});

4.和CSS：

.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }