Question

所以我得到了div元素创建的这个网格，我需要的是当我调整浏览器大小时，div元素应该向下移动。即，2 x 2网格变为1 x 4网格。目前没有任何反应，浏览器只是移动我的内容。

我真的没有任何线索，因为＆＃39;表＆＃39;需要有固定的大小，元素也是如此，但是当浏览器大小太小时，元素必须移动。

HTML

indexPath.row

CSS

<div class="table">
   <div class="element">
   </div>
   <div class="element">
   </div>
   <div class="element">
   </div>
   <div class="element">
   </div>
</div>

https://jsfiddle.net/bfdffuvq/

Answer 1

这是一个优雅的解决方案，可以在窗口尺寸过小时将2x2布局折叠为1x4布局。它适用于内部元素的任何宽度和高度。它的工作方式是使用额外的包装div来保持2x2结构。

JSFiddle示例（缩小预览框的大小以查看布局更改为1x4！）：https://jsfiddle.net/bfdffuvq/3/

这里也是代码内联：

Text:  Traceback (most recent call last):
  File "redditbot.py", line 13, in <module>
    print "Text: ", submission.selftext
  File "C:\Python27\lib\encodings\cp437.py", line 12, in encode
    return codecs.charmap_encode(input,errors,encoding_map)
UnicodeEncodeError: 'charmap' codec can't encode character u'\u2014' in  position 204: character maps to <undefined>

.inner {
    width: 200px;
    height: 200px;
    margin: 10px;
    background: gray;
}

.innerwrap {
    float: left;
}

Answer 2

这是什么？ 您是否正在尝试制作自适应网站？默认情况下不会发生这种情况。

您需要Bootstrap，它为您提供可用作响应式布局的类。

检查this Youtube introduction and basic use of Bootstrap。

当你使用像“width：800px;”，“width：80％;”这样的固定尺寸时，元素无法调整大小。（80％的父元素或屏幕，如果没有父母）或“宽度：80vw;” （如果您想要自己完成此操作，可以使用视口的80％视窗浏览器窗口）。

如果你想在没有Bootstrap CSS的情况下实现这一点：

<div class="innerwrap top">
    <div class="inner"></div>
    <div class="inner"></div>
</div>
<div class="innerwrap">
    <div class="inner"></div>
    <div class="inner"></div>
</div>

将此添加到CSS（我还添加了宽度）：

.inner-wrap.top { 
    float: left; 
    width: 50%;
 }
.inner-wrap { 
    width: 50%;
 }

@media (max-width: 600px) {
   .inner-wrap.top { 
      float: none; 
      width: 100%;
   }
   .inner-wrap { 
      width: 100%;
   }
}

Answer 3

如果您希望某些内容具有响应性，请不要使用px，因为px无论屏幕大小如何都会使其固定。最好使用%而不是px，因为%根据屏幕的大小使其适合。您可以在CSS中设置min-width属性，以便当div必须低于min-width时，下一个div将移至新行。

Answer 4

您明确定义了外部容器的大小，因此 - 没有什么可以改变它。

我不会定义宽度或高度，只需使用块级元素的自然默认值，即宽度：100％

然后，使用max-width: 800px;或任何你想要的东西。

您可以使用`@media查询根据屏幕大小制作规则。

HTML

<ul class='grid'>
  <li>01</li>
  <li>01</li>
  <li>01</li>
  <li>01</li>
</ul>

CSS

.grid {
  margin: 0; padding: 0
  list-style: none;
  max-width: 800px;
}

.grid li {
  /* width: 100%; by default */
}

@media (min-width: 500px) {
  .grid li {
    width: 50%;
    float: left;
  }
}

这里很难描述CSS如何在一篇文章中发挥作用，但这应该让你指向正确的方向。所有这些内联CSS规则让我相信有很多复制和粘贴正在进行中。我建议从一种新思维开始。

小提琴：http://jsfiddle.net/sheriffderek/6u55y4q2/

不在页面上移动的Html div元素调整大小

4 个答案: