如何平均分配的div的一行到在某些浏览器中的两行宽
下面我提供的jsfiddle来说明我的问题：如何平均分配的div的一行到在某些浏览器中的两行宽
https://jsfiddle.net/1vf8wgeu/
我的12“申报单”一行（实际上的联系，但看起来像行为一样）。 12个div中的每一个都具有百分比的颜色和设置宽度，并且该行延伸100％的屏幕宽度。
但是，在某个屏幕宽度上，这些div变得太小。我如何在某个屏幕宽度（比如说700px）下将这一行变成两行，最上面一行是6行，最下面一行是6行？问题是，两行仍然必须有100％的宽度和divs本身必须是宽度的两倍（因为它们将占用两行）。
我试着重新格式化HTML并在媒体查询中使用white-space: pre，但这留下了行/ div不能100％伸展的问题，并且行中间的空隙和媒体查询未激活。
任何解决方案非常感谢你。
这里展示的是的箱子没有拉伸100％宽度
问题下面是我能拿出最好的。我使用媒体查询来更改所有<a></a>标记中间的<b></b>标记。我也改变了样式表的初始<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>
忘记了HTML不会工作上面应该读取：。我使用媒体查询在所有“A”（锚点）标签的中间更改了“B”（粗体）标签。 – MrCoincidence
工作很好！谢谢！ – Cris
@Cris - 你没有不同宽度的元素？ – ConnorsFan
你可以使用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;
}
}
这也可以，谢谢！ – Cris
您可以尝试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%);
}
我已经删除了这个答案，因为我认为Andy的优雅答案给出了相同的结果，但当两部分的宽度不同时，情况并非如此。 – ConnorsFan
我想知道为什么你删除它，你的工作很好 – Cris
听起来像是你应该寻找到CSS媒体查询 – mygeea
你甚至看我的问题？ – Cris
我不太确定你的总体目标是什么，也许是一个游戏或其他东西，但也许尝试这种方法使用弹性基础？ https://stackoverflow.com/questions/31621257/how-to-control-number-of-items-per-row-using-media-queries-in-flexbox – enjoylife