html - 带内联 block 的交错布局，不能垂直组合框

Question

我想在交错网格布局中垂直和水平组合放置行内 block 框。

我只想将这些 block 放置在交错的网格布局中。我试过垂直对齐:顶部，显示:表格单元格，父字体大小:0，空白:无换行， float :左等。未找到任何解决方案。

Problem with this whiteSpace

I want to achieve this

正在使用此代码。

.contentPanel
{
    position: inherit;
    display: table-cell;
    float: left;
    padding: 10px;
    margin: 5px;
    width: 24.2%;
    min-width: 320px;
    height: auto;
    background: #FFF;
    box-sizing: border-box;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    vertical-align: top;
}

.contentPanel > h4
{
    text-align: center;
    margin-top: 5px;
    text-decoration: underline;
    box-sizing: border-box;
    color: #333;
}

.formLayout
{
    background-color: purple;
    display: table;
    width: 95%;
    background: #FFF;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

.formLayout > input
{
    width: 100%;
    height: 40px;
    outline: none;
    display: block;
    margin-top: 12px;
    border: none;
    border-bottom: 1px solid #AAA;
}

.formLayout > input[type=button]
{
    border: none;
    background-color: #66AAFF;
    color: #FFF;
    height: 40px;
}

<div class="contentPanel">
        <h4>cdscdcsc</h4>
        <form id="newDiseaseForm" class="formLayout">
            <input type="text" name="name" placeholder="sfd"/>
            <input type="text" name="symptoms" placeholder="sf"/>
            <input type="text" name="precautions" placeholder="sfs"/>
            <input type="text" name="riskFactors" placeholder="Rissfsfk Factors"/>
            <input type="text" name="vaccines" placeholder="sfs"/>
            <input type="button" name="add" title="Add" value="sf"/>
        </form>
    </div>
    
    <div class="contentPanel">
        <h4>cdscdcsc</h4>
        <form id="newDateForm" class="formLayout">
            <input type="text" name="date" placeholder="df"/>
            <input type="button" name="add" title="Add" value="dfd"/>
        </form>
    </div>
    
    <div class="contentPanel">
        <h4>cdscdcsc</h4>
        <form id="newEntryForm" class="formLayout">
            <input type="text" name="disease" placeholder="fd"/>
            <input type="text" name="date" placeholder="fdf"/>
            <input type="text" name="deadList" placeholder="fdf"/>
            <input type="text" data-role="tagsinput" name="fdd" placeholder="fdf"/>
            <input type="button" name="add" title="Add" value="fdf"/>
        </form>
    </div>

Answer 1

您可以试试这个响应式解决方案:

* {margin: 0; padding: 0; box-sizing: border-box}

#container {
  position: relative;
  width: 1200px;
  max-width: 100%;
  margin: 10px auto;
  column-count: 3;
  column-gap: 10px;
}

#container > .contentPanel {
  position: relative;
  margin-bottom: 10px;
  page-break-inside: avoid;
  break-inside: avoid-column;
  padding: 10px;
  height: auto;
  background: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,.3);
  vertical-align: top;
}

#container > .contentPanel > h4 {
  text-align: center;
  margin-top: 5px;
  text-decoration: underline;
  color: #333;
}

#container > .contentPanel > .formLayout {
  background: purple;
  display: table;
  width: 95%;
  background: #fff;
  margin: 0 auto;
  overflow: hidden;
}

#container > .contentPanel > .formLayout > input {
  width: 100%;
  height: 40px;
  outline: none;
  display: block;
  margin-top: 12px;
  border: none;
  border-bottom: 1px solid #aaa;
}

#container > .contentPanel > .formLayout > input[type=button] {
  border: none;
  background: #66AAFF;
  color: #fff;
  height: 40px;
}

@media (max-width: 1200px) {
  #container {padding: 0 10px}
}

@media (max-width: 768px) {
  #container {column-count: 2}
}

@media (max-width: 480px) {
  #container {column-count: 1}
}

<div id="container">
  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newDiseaseForm" class="formLayout">
      <input type="text" name="name" placeholder="sfd">
      <input type="text" name="symptoms" placeholder="sf">
      <input type="text" name="precautions" placeholder="sfs">
      <input type="text" name="riskFactors" placeholder="Rissfsfk Factors">
      <input type="text" name="vaccines" placeholder="sfs">
      <input type="button" name="add" title="Add" value="sf">
    </form>
  </div>

  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newDateForm" class="formLayout">
      <input type="text" name="date" placeholder="df">
      <input type="button" name="add" title="Add" value="dfd">
    </form>
  </div>

  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newEntryForm" class="formLayout">
      <input type="text" name="disease" placeholder="fd">
      <input type="text" name="date" placeholder="fdf">
      <input type="text" name="deadList" placeholder="fdf">
      <input type="text" data-role="tagsinput" name="fdd" placeholder="fdf">
      <input type="button" name="add" title="Add" value="fdf">
    </form>
  </div>
  
  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newDateForm" class="formLayout">
      <input type="text" name="date" placeholder="df">
      <input type="button" name="add" title="Add" value="dfd">
    </form>
  </div>
  
  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newEntryForm" class="formLayout">
      <input type="text" name="disease" placeholder="fd">
      <input type="text" name="date" placeholder="fdf">
      <input type="text" name="deadList" placeholder="fdf">
      <input type="text" data-role="tagsinput" name="fdd" placeholder="fdf">
      <input type="button" name="add" title="Add" value="fdf">
    </form>
  </div>
  
  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newDiseaseForm" class="formLayout">
      <input type="text" name="name" placeholder="sfd">
      <input type="text" name="symptoms" placeholder="sf">
      <input type="text" name="precautions" placeholder="sfs">
      <input type="text" name="riskFactors" placeholder="Rissfsfk Factors">
      <input type="text" name="vaccines" placeholder="sfs">
      <input type="button" name="add" title="Add" value="sf">
    </form>
  </div>
  
  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newEntryForm" class="formLayout">
      <input type="text" name="disease" placeholder="fd">
      <input type="text" name="date" placeholder="fdf">
      <input type="text" name="deadList" placeholder="fdf">
      <input type="text" data-role="tagsinput" name="fdd" placeholder="fdf">
      <input type="button" name="add" title="Add" value="fdf">
    </form>
  </div>
  
  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newDiseaseForm" class="formLayout">
      <input type="text" name="name" placeholder="sfd">
      <input type="text" name="symptoms" placeholder="sf">
      <input type="text" name="precautions" placeholder="sfs">
      <input type="text" name="riskFactors" placeholder="Rissfsfk Factors">
      <input type="text" name="vaccines" placeholder="sfs">
      <input type="button" name="add" title="Add" value="sf">
    </form>
  </div>
  
  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newDateForm" class="formLayout">
      <input type="text" name="date" placeholder="df">
      <input type="button" name="add" title="Add" value="dfd">
    </form>
  </div>
</div>

我已将容器设置为 1200 像素的固定宽度，但您可以根据需要进行调整。