具有不同页面宽度的div位置

Question

我正在寻找一种简单的方法来创建一个像这样的

的布局

，这样的页面大小会变得像这样

我是否必须创建两个ul，其中第一个为6 li，第二个为2 li，每个ul定位使用css规则？

Answer 1

您将使用css媒体查询。你会说：

@media only screen and (max-width:600px) {
    [class*="col-"] {
        width: 100%;
   }

并将最大宽度替换为所需的最大屏幕宽度，以使其生效。这也假设每个表元素都有自己的类名，以1结尾，然后是2，依此类推。您可以将其更改为div或只是手动执行每个元素，如：

.classname {
    width: 100%
  }

请注意，设置为100％的元素的宽度将是包含元素的宽度。对于填充，在div中添加此表并在其周围设置填充。

在css中对媒体查询进行一些研究，以便更好地理解它的工作原理。