交错的布局，带有内联块，不能将盒子混合在一起

Question

我想在交错的网格布局中垂直和水平组合放置内联块盒。

我只想将这些块放在交错的网格布局中。我尝试过垂直对齐：顶部，显示：表格，parent font-size：0，白空间：无纸，float：左：左等。没有找到任何解决方案。

这个白期的问题

我想实现这个

正在使用此代码。

.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>

我已经将容器设置为1200px的固定宽度，但是您可以根据自己的需求进行调整。