html - 带有图像的响应式网格(第一列有 3 行，第二列有 1 行)-6ren

html - 带有图像的响应式网格(第一列有 3 行，第二列有 1 行)

转载作者：行者123 更新时间：2023-11-28 15:58:53

UPD:我试过这个，唯一的问题是我不能放更大的图片。我希望网格的高度更高(两倍)。我尝试将 col md 值更改为 6 但没有成功:

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
img {
  border: 0;
}
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  background-color: #fff;
}

img {
  vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 30px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
.col-xs-pull-12 {
  right: 100%;
}
.col-xs-pull-11 {
  right: 91.66666667%;
}
.col-xs-pull-10 {
  right: 83.33333333%;
}
.col-xs-pull-9 {
  right: 75%;
}
.col-xs-pull-8 {
  right: 66.66666667%;
}
.col-xs-pull-7 {
  right: 58.33333333%;
}
.col-xs-pull-6 {
  right: 50%;
}
.col-xs-pull-5 {
  right: 41.66666667%;
}
.col-xs-pull-4 {
  right: 33.33333333%;
}
.col-xs-pull-3 {
  right: 25%;
}
.col-xs-pull-2 {
  right: 16.66666667%;
}
.col-xs-pull-1 {
  right: 8.33333333%;
}
.col-xs-pull-0 {
  right: auto;
}
.col-xs-push-12 {
  left: 100%;
}
.col-xs-push-11 {
  left: 91.66666667%;
}
.col-xs-push-10 {
  left: 83.33333333%;
}
.col-xs-push-9 {
  left: 75%;
}
.col-xs-push-8 {
  left: 66.66666667%;
}
.col-xs-push-7 {
  left: 58.33333333%;
}
.col-xs-push-6 {
  left: 50%;
}
.col-xs-push-5 {
  left: 41.66666667%;
}
.col-xs-push-4 {
  left: 33.33333333%;
}
.col-xs-push-3 {
  left: 25%;
}
.col-xs-push-2 {
  left: 16.66666667%;
}
.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-push-0 {
  left: auto;
}
.col-xs-offset-12 {
  margin-left: 100%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-0 {
  margin-left: 0%;
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }

<section class="main">
    <div class="container grid-custom">
        <div class="row">
            <div class="row col-sm-6">
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/3498db/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/e74c3c/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/f1c40f/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/3498db/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/e74c3c/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/f1c40f/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/3498db/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/e74c3c/fff" alt="" class="img-responsive">
                </div>
                <div class="col-xs-4">
                    <img src="http://placehold.it/300x200/f1c40f/fff" alt="" class="img-responsive">
                </div>
            </div>
            <div class="col-sm-6">
                <img src="http://placehold.it/600x400/2ecc71/fff" alt="" class="img-responsive center-block">
            </div>
        </div>
    </div>
</section>

我正在尝试创建图像网格。更具体地说，我需要 2 列，其中第一列有 3 行，每行有 3 列(图像)，第二列有一个图像。

无论屏幕尺寸如何，我都希望网格能够响应并且看起来完全像这样:

但如果我更改浏览器或屏幕尺寸，它看起来很乱:

(function() {

  var img = document.getElementById('one').firstChild;
  img.onload = function() {
    if (img.height > img.width) {
      img.height = '20%';
      img.width = 'auto';
    }
  };

}());

* {
  margin: 0;
  padding: 0;
}
.one,
.two,
.four,
.five,
.six,
.seven,
.eight {
  height: 540px;
  text-align: center;
  border: 1px solid white;
}
.four {
  height: 180px;
}
.container {
  width: 90%;
  margin: 30px auto 0px auto;
}
.container:before,
.container:after {
  content: "";
  display: table;
}
.container:after {
  clear: both;
}
.one {
  float: left;
  width: 33.33333%;
  margin-left: 66.66667%;
  margin-right: -100%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
.nested {
  float: left;
  width: 66.66666%;
  margin-right: 33.333334%;
  margin-right: -100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
  padding-left: 0;
  padding-right: 0;
}
.four {
  clear: left;
  float: left;
  width: 100%;
  margin-left: 0%;
  margin-right: -100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
@media screen and (max-width: 700px) {
  .one {
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }
  .nested {
    clear: left;
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
    ;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    padding-left: 0;
    padding-right: 0;
  }
  .four {
    clear: left;
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }
}
img {
  width: auto;
  max-height: 540px;
}
.second {
  width: 33.3334%;
  height: auto;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="nested">
    <div class="four">
      <a href="04.html">
        <img class="second" src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
      </a>
      <a href="05.html">
        <img class="second" src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
      </a>
      <a href="06.html">
        <img class="second" src="http://contabilidadmlm.com/games/wp-content/uploads/2013/10/Captura-de-pantalla-2013-09-02-a-la-2528s-2529-19.19.26-914x576.png" />
      </a>
    </div>
    <div class="four">
      <a href="04.html">
        <img class="second" src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
      </a>
      <a href="05.html">
        <img class="second" src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
      </a>
      <a href="06.html">
        <img class="second" src="http://contabilidadmlm.com/games/wp-content/uploads/2013/10/Captura-de-pantalla-2013-09-02-a-la-2528s-2529-19.19.26-914x576.png" />
      </a>
    </div>
    <div class="four">
      <a href="04.html">
        <img class="second" src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
      </a>
      <a href="05.html">
        <img class="second" src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
      </a>
      <a href="06.html">
        <img class="second" src="http://contabilidadmlm.com/games/wp-content/uploads/2013/10/Captura-de-pantalla-2013-09-02-a-la-2528s-2529-19.19.26-914x576.png" />
      </a>
    </div>

    <div class="one">
      <img class="first" src="http://techno-shop.bg/userfiles/productlargeimages/product_10549.jpg" />
    </div>

  </div>

我尝试使用具有响应网格的不同版本:

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}
/*  COLUMN SETUP  */

.col {
  background: #124;
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}
.col:first-child {
  margin-left: 0;
}
/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1;
  /* For IE 6/7 */
}
/*  GRID OF TWO  */

.span_2_of_2 {
  width: 100%;
}
.span_1_of_2 {
  width: 49.2%;
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
}
@media only screen and (max-width: 480px) {
  .span_2_of_2,
  .span_1_of_2 {
    width: 100%;
  }
}
/*  GRID OF THREE  */

.span_3_of_3 {
  width: 100%;
}
.span_2_of_3 {
  width: 66.66%;
}
.span_1_of_3 {
  width: 33.33%;
}
/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
  .span_3_of_3,
  .span_2_of_3,
  .span_1_of_3 {
    width: 100%;
  }
}
.col2 {
  background: #F1F1F1;
  display: block;
  float: left;
  margin: 0;
  max-height: 100px;
}
.col:first-child {
  margin-left: 0;
}
img {
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  float: left;
}

<div class="section group">
  <div class="col span_1_of_2">
    <div class="section group">
      <div class="col2 span_1_of_3" style="background:#FF0000;">
        <a href="04.html">
          <img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
        </a>
      </div>
      <div class="col2 span_1_of_3">
        <a href="05.html">
          <img src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
        </a>
      </div>
      <div class="col2 span_1_of_3">
        <a href="04.html">
          <img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
        </a>
      </div>
      <div class="section group">
        <div class="col2 span_1_of_3">
          <a href="04.html">
            <img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
          </a>
        </div>
        <div class="col2 span_1_of_3">
          <a href="05.html">
            <img src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
          </a>
        </div>
        <div class="col2 span_1_of_3">
          <a href="04.html">
            <img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
          </a>
        </div>
        <div class="section group">
          <div class="col2 span_1_of_3" style="background:#FF0000;">
            <a href="04.html">
              <img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
            </a>
          </div>
          <div class="col2 span_1_of_3">
            <a href="05.html">
              <img src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
            </a>
          </div>
          <div class="col2 span_1_of_3">
            <a href="04.html">
              <img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col span_1_of_2">
    <a href="04.html">
      <img class="big" src="http://techno-shop.bg/userfiles/productlargeimages/product_10549.jpg" />
    </a>
  </div>
</div>

最佳答案

你可以试试bootstrap响应式框架代码如图所示

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      .red, .blue, .yellow {height:50px;border-right:1px solid black;}
      .red{background-color:red;}
      .blue{background-color:blue;}
      .yellow{background-color:yellow;}
      .brown{height:150px;background-color:brown;}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-sm-8 col-xs-8">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-4 col-sm-4 col-xs-4 red"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 red"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 red"></div>
          </div>
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-4 col-sm-4 col-xs-4 blue"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 blue"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 blue"></div>
          </div>
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-4 col-sm-4 col-xs-4 yellow"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 yellow"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 yellow"></div>
          </div>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-4 brown"> 
        </div>
      </div>
    </div>
  </body>
</html>

关于html - 带有图像的响应式网格(第一列有 3 行，第二列有 1 行)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40507956/

文章推荐： html - float 元素问题

文章推荐： ios - 如何在 AsyncDisplayKit 中为 AsTableNode 创建框架？

文章推荐： javascript - 重写 JavaScript 动画以防止浏览器中缩放/模糊

html - 给定布局的 Bootstrap 网格(或 IE 兼容的 CSS 网格)
您能否建议如何在 Bootstrap 或 IE 兼容的 CSS 网格中，在没有 CSS 网格的情况下进行以下布局。在大屏幕中头部，左侧堆叠的 body 和右侧覆盖头部和 body 高度的图像。 [
ios - 如何在 Objective-C 中使用 for 循环将 View 创建为网格(例如 9*9 网格、15*15 网格)
我想在 Objective-C 中绘制一个 15*15 的网格。格子颜色是蓝色的，就像在诺基亚制作“贪吃蛇”游戏的棋盘一样。我试过使用 for 循环来创建 subview ，但它似乎不起作用，我查看
具有自动填充和自动大小的 CSS 网格
我正在尝试将 CSS 网格与 grid-template-columns: repeat(auto-fill, auto) 一起使用，单元格被设置为最大宽度，导致每行一个元素。 p> 是否可以让元素宽
Magento，网格，添加带有网站链接的列
我正在努力在网格的自定义列上添加一个指向网站的简单、简单的链接。我用了 Inchoo blog为列添加自定义渲染器，它可以工作。我认为只需修改渲染并添加标签就足够了。但我的希望破灭了，行不通。如何做
具有交替线条样式的 Gnuplot 网格
使用 Gnuplot 我绘制了下图 - 现在，正如您在图像中看到的那样，很难在线条之间识别出其末端的块。所以我想用不同的颜色或样式交替着色网格。我现在用来给网格着色的代码是 - set style
WPF 网格 - 绘制自定义网格线
假设我有一个非常简单的 WPF 网格(6 行 x 6 列)，定义如下:
具有动态列的 wpf 网格
我有一个希望绑定(bind)到 WPF 网格的集合。我面临的问题是列数是动态的并且取决于集合。这是一个简单的模型: public interface IRows { string Messa
java - 如何手动填充表格/网格
我正在使用 Vaadin 8，我想制作某种混淆矩阵。我想知道是否可以根据单元格位置而不是数据提供者手动填充表格/网格的值。 referenceTable.addColumn(reference ->
悬停时带有单行的 CSS 网格
我在 http://jsfiddle.net/TsRJy/ 上创建了一个带有 div 框的网格. 问题我不知道如何使 a:hover 工作。信息重写 HTML 代码，因为表格不适合我。 http
具有自动宽度和高度的 Silverlight 网格
银光处女在这里。如何使网格周围的用户控件自动调整大小以适应内部网格宽度？目前，当浏览器窗口更宽时，用户控件的显示尺寸约为 300 或 400 像素。它在数据网格周围呈现垂直和水平滚动条，这很丑陋。我想
CSS 网格 - 将所有子项保持在一行且间距相等
这个问题已经有答案了: Equal width columns in CSS Grid (11 个回答) 已关闭 2 年前。使用 CSS Grid，当您不知道会有多少个子项时，如何将所有子项保留在一
CSS 网格，中间有一个额外的包装器
我想使用 CSS Grid 的 grid-template-areas。但问题是我正在使用的 CMS 添加了大量额外的包装器。有没有办法忽略额外的包装？因为它弄乱了漂亮的网格区域...... 我正在
extjs - 网格-按钮单击处理程序
在我的Grid中，当我单击“操作”按钮(下面的代码中显示的“删除和编辑”按钮)时，我需要弹出一个窗口，而不用警告消息提醒用户；在下面的代码中，我正在使用HANDLER handler: button
CSS 网格 - 将所有子项保持在一行且间距相等
这个问题已经有答案了: Equal width columns in CSS Grid (11 个回答) 已关闭 2 年前。使用 CSS Grid，当您不知道会有多少个子项时，如何将所有子项保留在一
grid - 网格/仓库布局上离散事件模拟的可视化
我需要模拟一个仓库，其中有几辆自动驾驶车辆在给定的布局上移动，并具有简单的优先级规则。根据我的理解，这个问题可以通过离散事件模拟(DES)轻松解决，我会使用 SimPy为了这。我看到的问题是，我似乎
跨用户控件的 WPF 网格？
在 ASP.NET 中，我可以让用户控件在页面上的表格中占据多个单元格: 用户控件1: foo bar 第1页: 并且自动调整列宽以适应最大的用户控件。这也可以在 WPF
Jquery 实时搜索和复选框过滤器、网格
我正在寻找一种方法来实时搜索我的网格+要过滤的复选框。我有一个包含学生的网格(照片和姓名)。我想要的是有一个复选框，可以过滤学生所在的不同类(class)。还有一个搜索栏，我可以在其中输入学生姓名。
具有自动完成功能的 jQuery 网格
我正在使用 jQuery 和 jQuery UI 构建一个 Web 应用程序。我陷入了僵局。我需要的是一个 jQuery 网格，它具有可编辑字段，并以某种方式在这些可编辑单元格之一上合并一个自动完成字
具有多个分组的 Javascript 网格
我想知道是否有其他 JavaScript 组件可以提供具有多个分组的网格表示。下面是jqGrid的截图我扩展了允许该功能，但它需要获取所有数据。我希望在扩展分组时加载数据。另一个修改后的 jqGri
CSS:网格、滚动条和工具提示问题
我一直在为我将在此处描述的 CSS 问题而烦恼: 在下面的示例 ( https://codesandbox.io/s/jjq4km89y5 ) 中，您可以看到一个可滚动的内容(紫色背景)和一个被左侧面

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 带有图像的响应式网格(第一列有 3 行，第二列有 1 行)