如何在特定浏览器宽度下将一行div平均分割为两行

时间：2017-08-06 00:24:44

标签： javascript jquery css width row

下面我提供了一个jsfiddle来说明我的问题：

https://jsfiddle.net/1vf8wgeu/

我有一排12＆＃39; divs＆＃39; （实际上链接，但看起来和表现为div）。 12个div中的每一个都有一个颜色和百分比的设置宽度，这一行延伸100％的屏幕宽度。

然而，在某个屏幕宽度下，这些div变得太小。我如何在一定的屏幕宽度（让我们说700px）中将此行变为两行，最上面的行为6行，底行为6行？问题是两行必须仍然各自具有100％的宽度，并且div本身必须是宽度的两倍（因为它们将占据两行）。

我尝试重新格式化HTML并使用white-space: pre和媒体查询但这会留下行/ div未拉伸100％的问题，并且行中间的间隙和媒体查询无效

非常感谢任何解决方案，谢谢。

这里显示的是盒子未拉伸100％宽度的问题 img

3 个答案:

答案 0 :(得分：2)

您可以使用flexbox。通过将锚分成两组，这就是我想出的。请注意，我确实捏造了一个百分比以使其发挥作用，因此它与原始宽度不相符。

HTML 

<div class="main">
  <aside class="first">
    <a></a><a></a><a></a><a></a><a></a><a></a>
  </aside>
  <aside class="second">
    <a></a><a></a><a></a><a></a><a></a><a></a>
  </aside>
</div>

CSS 

div.main {
  display: flex;
  flex-direction: column;
  width: 100%;
}

aside {
  display: flex;
  flex-direction: row;
  width: 100%;
}

aside a {
  height: 50px;
  display: flex;
}

/*widths and colors*/

.first a:nth-child(1) {
  width: calc(12% *2);
  background-color: hsl(65, 100%, 75%);
}

.first a:nth-child(2) {
  width: calc(7% * 2);
  background-color: hsl(20, 100%, 60%);
}

.first a:nth-child(3) {
  width: calc(7% * 2);
  background-color: hsl(40, 100%, 75%);
}

.first a:nth-child(4) {
  width: calc(5% *2);
  background-color: hsl(60, 100%, 60%);
}

.first a:nth-child(5) {
  width: calc(14% *2);
  background-color: hsl(80, 100%, 65%);
}

.first a:nth-child(6) {
  width: calc(7% * 2);
  background-color: hsl(100, 100%, 60%);
}

.second a:nth-child(1) {
  width: calc(11% * 2);
  background-color: hsl(260, 100%, 75%);
}

.second a:nth-child(2) {
  width: calc(11% * 2);
  background-color: hsl(140, 100%, 60%);
}

.second a:nth-child(3) {
  width: calc(5% * 2);
  background-color: hsl(160, 100%, 75%);
}

.second a:nth-child(4) {
  width: calc(7% * 2);
  background-color: hsl(180, 100%, 60%);
}

.second a:nth-child(5) {
  width: calc(5% * 2);
  background-color: hsl(200, 100%, 75%);
}

.second a:nth-child(6) {
  width: calc(11% * 2);
  background-color: hsl(220, 100%, 60%);
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 600px) {
  div.main {
    flex-direction: row;
  }
}

DEMO

答案 1 :(得分：1)

这是我能想到的最好的。我使用媒体查询更改了所有<b></b>代码中间的<a></a>代码。我还更改了样式表中初始<a>标签的所有百分比，使它们都是均匀的尺寸...... 

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        @media only screen and (max-width: 700px) {
            body {
                background-color: lightblue;
            }
            b {
                display:block;
            }
            a {
                width: 16.66% !important;
            }
       }

        aside {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

            aside a {
                height: 150px;
                display: inline-block;
                vertical-align: top;
            }

        /*widths and colors*/
        a:nth-of-type(1) {
            width: 8.33%;
            background-color: hsl(0,100%,75%);
        }

        a:nth-of-type(2) {
            width: 8.33%;
            background-color: hsl(20,100%,60%);
        }

        a:nth-of-type(3) {
            width: 8.33%;
            background-color: hsl(40,100%,75%);
        }

        a:nth-of-type(4) {
            width: 8.33%;
            background-color: hsl(60,100%,60%);
        }

        a:nth-of-type(5) {
            width: 8.33%;
            background-color: hsl(80,100%,65%);
        }

        a:nth-of-type(6) {
            width: 8.33%;
            background-color: hsl(100,100%,60%);
        }

        a:nth-of-type(7) {
            width: 8.33%;
            background-color: hsl(260,100%,75%);
        }

        a:nth-of-type(8) {
            width: 8.33%;
            background-color: hsl(140,100%,60%);
        }

        a:nth-of-type(9) {
            width: 8.33%;
            background-color: hsl(160,100%,75%);
        }

        a:nth-of-type(10) {
            width: 8.33%;
            background-color: hsl(180,100%,60%);
        }

        a:nth-of-type(11) {
            width: 8.33%;
            background-color: hsl(200,100%,75%);
        }

        a:nth-of-type(12) {
            width: 8.33%;
            background-color: hsl(220,100%,60%);
        }
    </style></head>
<body>
    <aside><a></a><a></a><a></a><a></a><a></a><a></a><b></b><a></a><a></a><a></a><a></a><a></a><a></a></aside>
</body>
</html>

答案 2 :(得分：1)

您可以尝试 this jsfiddle 。元素分布在两个div容器中，这些容器位于同一行或两个不同的行上，具体取决于页面的宽度。

下面显示的代码说明了问题中设置的这些条件：

  • 各个锚元素具有不同的宽度
  • 在一行或两行上，元素填充整个页面宽度
  • 当在一行上分组时，这两个部分不一定占据宽度的一半（在下面的示例中，第一部分占宽度的55％，第二部分占45％）

<强> HTML 

<div class="container">
    <div class="div1">
    <a></a><a></a><a></a><a></a><a></a><a></a>
    </div><div class="div2">
    <a></a><a></a><a></a><a></a><a></a><a></a>
    </div>
</div>

<强> CSS 

div.container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

div.container > div {
    display: inline-block;
    width: 100%;
}

@media (min-width: 500px) {
    div.container > div.div1 {
        width: 55%;
    }
    div.container > div.div2 {
        width: 45%;
    }
}

div a {
    height: 50px;
    display: inline-block;
    vertical-align: top;
}


/*widths and colors*/

.div1 > a:nth-of-type(1) {
    width: 24%;
    background-color: red;
}

.div1 > a:nth-of-type(2) {
    width: 13%;
    background-color: hsl(20, 100%, 60%);
}

.div1 > a:nth-of-type(3) {
    width: 13%;
    background-color: hsl(40, 100%, 75%);
}

.div1 > a:nth-of-type(4) {
    width: 10%;
    background-color: hsl(60, 100%, 60%);
}

.div1 > a:nth-of-type(5) {
    width: 27%;
    background-color: hsl(80, 100%, 65%);
}

.div1 > a:nth-of-type(6) {
    width: 13%;
    background-color: hsl(100, 100%, 60%);
}

.div2 > a:nth-of-type(1) {
    width: 23%;
    background-color: hsl(260, 100%, 75%);
}

.div2 > a:nth-of-type(2) {
    width: 23%;
    background-color: hsl(140, 100%, 60%);
}

.div2 > a:nth-of-type(3) {
    width: 10%;
    background-color: hsl(160, 100%, 75%);
}

.div2 > a:nth-of-type(4) {
    width: 15%;
    background-color: hsl(180, 100%, 60%);
}

.div2 > a:nth-of-type(5) {
    width: 10%;
    background-color: hsl(200, 100%, 75%);
}

.div2 > a:nth-of-type(6) {
    width: 19%;
    background-color: hsl(220, 100%, 60%);
}
相关问题
最新问题