下面我提供的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容器中，它們位於同一行或兩個不同行上，具體取決於頁面的寬度。
的代碼，如下所示，佔這些條件下，問題集：
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