网格-HMTL |的CSS

Question

<div class="container">
 <div class="item half-width">1</div>
 <div class="item half-width">2</div>
 <div class="item half-width">4</div>
 <div class="item half-width">5</div>
 <div class="item half-width">6</div>
 <div class="item full-width">7</div>
</div>

如何为html内容编写CSS，以便获得上述输出，如在x方向上可滚动的图片所示。在DOM完全渲染之后（可能是在某个时间点），我需要删除元素4，以使5出现在前面并自动对齐。

Answer 1

在仔细阅读了您的问题后，我使用css grid提出了解决方案。我不是CSS网格专家，但我希望这能解决您的问题

 .item:nth-child(4n),
.item:nth-child(4n-1) {
  order: 1;
  grid-row-start: 2
} 



.container {
  display: grid;
  max-width:100vw;
  overflow-x:scroll;
  grid-template-columns: 50% 50% 50% 50%;
  grid-template-rows: 150px 150px;
}

.item {
  height: 140px;
  margin: 5px;
  background:blue;
  color:white;
 
}
.item:last-child {
  grid-column-end:5;
  grid-column-start:3;
}

<div class="container">
  <div class="item half-width">1</div>
  <div class="item half-width">2</div>
  <div class="item half-width">3</div>
  <div class="item half-width">4</div>
  <div class="item half-width">5</div>
  <div class="item half-width">6</div>
  <div class="item full-width">7</div>
</div>

Answer 2

此外，当您尝试使用多维结构时，可以考虑使用CSS网格。

---

$('input[name="checkImg"]').on('change', function (e) {
    if ($('input[name="checkImg"]:checked').length > 3 ) {
        console.log("You can select no more than 3 options");
        $(this).prop('checked', false);
        $(this).parent().removeClass("btn-success");
        $(this).parent().addClass("btn-default off");
    }                        
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <!-- Primera Fila -->
  <div class="col">
    <div class="card">
      <div class="card-header colorPlataforma">Imagenes Disponibles</div>
      <div class="card-body fuenteTabla">
        <div class="overflow">
          <ul class="justify-content-center col-12 connectedSortable" id="sortable1">
            <div style="border:solid border-width: 1px;">
              <li class="ui-state-default">
                <input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"
                data-onstyle="success" data-offstyle="danger">
                Option 1
              </li>
            </div>
            <div style="border:solid border-width: 1px;">
              <li class="ui-state-default"> 
                <input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"
                data-onstyle="success" data-offstyle="danger">
                Option 2
              </li>
            </div>
            <div style="border:solid border-width: 1px;">
              <li class="ui-state-default"> 
                <input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"
                data-onstyle="success" data-offstyle="danger">
                Option 3 
              </li>
            </div>
            <div style="border:solid border-width: 1px;">
              <li class="ui-state-default"> 
                <input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"
                data-onstyle="success" data-offstyle="danger">
                Option 4
              </li>
            </div>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>