Question

我正在尝试使用这样的两行中的六个div创建一个站点。

  [ ] [ ] [ ]
  [ ] [ ] [ ]

当我让我的浏览器变小时，我想成为这样的显示器：

  [ ] [ ]
  [ ] [ ]
  [ ] [ ]

我尝试使用float，@ media，inline-block和div容器，但根本不起作用，因为它会显示如下：

  [ ] [ ]
    [ ] 
  [ ] [ ]
    [ ]

请大家，告诉我如何解决，因为我已经尝试了很多方法但没有工作谢谢你的帮助。

Answer 1

您正在寻找的关键元素是

display: inline-block;

为你的div。您可以为元素提供灵活的宽度，使它们适合您的外部div。

看这里，试试这里： http://jsfiddle.net/01ntLun5/

问候！

Answer 2

据我所知，没有纯CSS方法可以做到这一点。我在窗口调整大小时使用jQuery重新计算元素的宽度。这是一个例子：

HTML：

<ul class="column">
  <li>
    <div class="block">
    <!-- content -->
    </div>
  </li>
</ul>

CSS：

ul.column{
  width: 100%;
  padding: 0;
  margin: 10px 0;
  list-style: none;
}
ul.column li {
  float: left;
  width: 200px; /* column width by default */
  padding: 0;
  margin: 5px 0;
  display: inline;
}
.block {
  height: 355px;
  font-size: 1em;
  margin-right: 10px; /* cell spacing */
  padding: 20px;
  background: #e3e1d5;
}
.block h2 {
  font-size: 1.8em;
}
.block img {
  width: 89%; /* -1% for fixing bug in IE6 */
  padding: 5%;
  background:#fff;
  margin: 0 auto;
  display: block;
  -ms-interpolation-mode: bicubic; /* fix for IE 6/7 */
}

jQuery的：

function smartColumns() {

  $("ul.column").css({ 'width' : "100%"});

  var colWrap = $("ul.column").width(); //get row width
  var colNum = Math.floor(colWrap / 200); //define how much 200px columns this row can contain
  var colFixed = Math.floor(colWrap / colNum); //define max possible column width for this row

  $("ul.column").css({ 'width' : colWrap}); //setting exact width in px insted of "100%" can prevent various bugs in different browsers
  $("ul.column li").css({ 'width' : colFixed}); //set column width

}

smartColumns(); //call function after page has loaded

$(window).resize(function () { //call function after window has resized
  smartColumns();
});

Answer 3

您可以根据自己的要求使用Bootstrap。如果您对此感兴趣，我可以发布bootstrap gridSystem的链接我建议您使用

visit this site

谢谢

如何响应地显示连续的div

3 个答案: