1

我正在尝试解决响应式设计中的定位问题。

我有一个容器 div，包含 4 个（但可能或多或少）显示为 inline-block 的 div。我想知道在调整页面大小时如何控制每行 div 的数量（如果可能的话，使用 CSS）。例如，当 4 个容器不再适合容器时，最后一个被移动到第二行。在这种情况下，我希望第一行有 2 个容器，第二行有 2 个容器。我不知道该怎么做。欢迎您的帮助！

编辑：它也可以是 6 个容器，如果布局是： - 1 行 6 个块（如果适合） - 2 行 3 个块 - 3 行 2 个块 - 6 行 1 个

收容者的数量是可变的。我只想每行有相同数量的容器

的HTML：

<div class="container"> 
   <div class="containee"></div>
   <div class="containee"></div>
   <div class="containee"></div>
   <div class="containee"></div>
</div>

的CSS：

.containee {
  width:200px;
  height:200px;
  display:inline-block;
  background-color:tomato
}

该示例可以在这里看到： http: //cssdesk.com/uGLbq

（PS：我试图在网上找到解决方案，但我真的不知道与这个主题相关的好关键字）

4

4 回答 4

2

你不能使用 CSS (AFAIK)。

您可以使用 Javascript 实时动态地进行“数学运算”。

在你的情况下，

  • 你知道一个街区的宽度（在那一刻），
  • 您可以轻松获得窗口宽度（在那一刻），
  • 你知道你的区块编号（在那一刻）；

只需在以下代码中应用（（1）第一次打开页面，（2）每次块数变化，或（3）分辨率变化）算法：

// EXAMPLE OF INPUT
var windowWidth    = 1400;  // read it...
var blockWidth     = 200;   // read it or use const...
var numberOfBlocks = 10;    // read it... 


// Calculate the maximum number of blocks per row
var maxBlocksPerRow;
for (var i=0; i < numberOfBlocks; i++) {
   if ( (blockWidth * (i + 1)) > windowWidth){
      maxBlocksPerRow = i;
      break; 
   }
}

// Check the highest 0 module combination while iterating backwards
var magicNumberForMatchingBlocks = 1; // if not found, it will be 1.
for (var i = maxBlocksPerRow; i > 0 ; i--) {
   if ( (numberOfBlocks % i) == 0){
      magicNumberForMatchingBlocks = i;
      break;
   }
}

alert("With " + numberOfBlocks + " blocks, each one wide " + 
      blockWidth + " pixels, and a window wide " + windowWidth + " pixels, 
      the number of blocks per row for having always 
      the same number of block in any row is: " + magicNumberForMatchingBlocks);

然后使用该数字使用 Javascript 填充或重新排列元素，或者使用 jQuery 之类的 Javascript 库更好。

于 2013-01-26T01:01:05.163 回答
1

html:

<div class="container">
    <div class="grouped">
        <div class="containee"></div>
        <div class="containee"></div>
    </div>
    <div class="grouped">
        <div class="containee"></div>
        <div class="containee"></div>
    </div>
</div>

CSS：

.containee {
  width:200px;
  height:200px;
  display:inline-block;
  background-color:tomato
}
.grouped {
  float:left;
}
于 2013-01-25T23:00:27.777 回答
0

试试这个：

.container
{
  min-width: 410px;
}
于 2013-01-25T22:57:05.277 回答
0

如果页面适合 4，则给出.containeea float:left;，它们将彼此并排放置，否则，您将有另一行 div。如果你有另一行，你也可以给它，margin-top:5px;第二行的 div 不会粘在第一行的 div 上。请注意，使用这种方法，它不必.containee在每行中具有相同的数量，如果你有 4，那么你重新调整大小，你将有 3 - 1，然后是 2 - 2 ......等等。

于 2013-01-25T22:58:01.703 回答