Question

我想要div元素的布局如下所示：

如果屏幕足够大，那么单行中有很多块。

例如，我希望每个块的最小宽度设置为250px。

所以在大屏幕上，我可以为这些元素提供以下内容。右边是地图（可关闭），如果用户隐藏它，那么行中将有6个块。

接下来，当我水平缩小浏览器窗口时，所有块都不适合行，因此它们移动到下一行。好的，现在这样他们去做第二行，但是他们在div块和地图之间留出空间。如下图所示。

我想有这样的布局，如果4个块不适合空间那么确定有3个块但是它们同样填充剩余空间（没有剩余的黄色空间）。见下图。

然后，当浏览器窗口缩小时，它应该如下所示

在移动设备和非常狭窄的浏览器窗口上：

好的，我可以使用这样的CSS样式实现这样的东西：

#parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
    width: calc(33% - 15px);
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;  
    min-width: 250px;
}

然后我应该使用媒体查询手动更改它：

calc(25% - 15px) //lg
calc(33% - 15px) //md
calc(50% - 15px) //sm
calc(100% - 15px) //xs

当地图消失时甚至可能

calc(16.667% - 15px) //lg+no map

Ok FLEX不是那么向后兼容所以我可以玩更多，并做这样的事情：

#parent {

}

.child {
    width: calc(33% - 15px);
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;  
    min-width: 250px;
    float: left; 
}

然后也会根据屏幕尺寸手动更改此宽度并使用

在最后一个元素后添加 clear：left

.block-offer:nth-last-child(1):after { 
    clear: left; 
}

或之前其他元素制作其他一些clearfix

甚至（是必要的吗？）添加clear：在每行之后使用：

.block-offer:nth-child(4n+1) { 
   clear:left; 
}
.block-offer:nth-child(3n+1) { 
   clear:left; 
}
.block-offer:nth-child(2n+1) { 
   clear:left; 
}
.block-offer:nth-child(1n+1) { 
   clear:left; 
}

喜欢这个宽度：calc（）取决于屏幕大小和divs witdh

但是后来我需要使用很多媒体查询，我想将这个CSS包装成一些有角度的2+组件，只有这样的东西：

<blocks-container max-cols="6"> 
    <block min-width="250px"></block> 
    <block min-width="250px"></block>
     ...
</blocks-container>

我认为使用@media查询会改善这种行为，但我的组件会与屏幕尺寸紧密结合，我认为没有像我希望的那样通用灵活地指定max-cols和min-宽度。

Answer 1

如果你想使用float方法，你应该这样做：

FIDDLE

HTML：

<div class="col">
   <div class="content">
       <p>Content</p>
   </div>
</div>

CSS：

/* complete with your style */
.col { display:block; width:25%; border-sizing:border:box; float:left; padding:10px; }

@media (max-width: 1280px) { 

.col { width:33%; }

}

@media (max-width: 1024px) { 

.col { width:50%; }

}

@media (max-width: 768px) { 

.col { width:100%; }

}

如果您想使用flex方法，请按行订购html，然后使用flex-wrap:wrap;和width:250px或min-width:250px: width:25%，并使用上述媒体查询

使元素平均填充给定空间

1 个答案: