Как сделать элементы потоками вниз, а затем в ответном макете

Question

У меня есть сценарий, в котором я использую отзывчивый макет для горизонтального прокручивания «меню» с размером overflow-x:scroll, когда размер экрана мал и его вертикальное значение с overflow-y:scroll раз он будет соответствовать по вертикали.

Проблема, с которой я столкнулась, заключается в том, что при ее горизонтальном направлении поток внутренних элементов в настоящее время слева направо, а когда ящик заполнен, остальные скрыты, и они не толкаются дальше по оси х.

Я пробовал несколько предложений, которые я нашел here и here. Я также попытался использовать transform:rotate(90deg); на внешней стороне, а затем transform:rotate(-90deg); на внутренних, но это казалось break the rest of the layout.

Я смотрел flex, но поскольку мне нужно поддерживать IE8 +, это не вариант.

Этот фрагмент кода демонстрирует проблему: (JavaScript не является частью проблемы, ее только для демонстрации вопроса)

$('#toggle').on('click', function(){ 
 
    $('#responsive').toggleClass('vertical'); 
 
}); 
 

 
var blockString = "", 
 
    blocks = function() { 
 
     for (var i = 0; i < 80; i++) { 
 
      blockString += '<span style="background-color: #' + (Math.random() * 0xFFFFFF << 0).toString(16) + '">' + i + '</span>' 
 
     } 
 
    } 
 
blocks(); 
 

 
$('#responsive').append(blockString);

#responsive { 
 
    background-color: #eee; 
 
    height: 200px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    padding: 5px; 
 
    border: 3px solid #aaa; 
 
} 
 

 
#responsive.vertical { 
 
    height: 400px; 
 
    width: 200px; 
 
    float: left; 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
} 
 
#responsive > span { 
 
    width:130px; 
 
    height:50px; 
 
    display:inline-block; 
 
    margin:5px; 
 
} 
 
#panel { 
 
    background-color: #eee; 
 
    height: 400px; 
 
    padding: 5px; 
 
    border: 3px solid #aaa; 
 
    margin-left:0px; 
 
    margin-top:5px; 
 
} 
 

 
#responsive.vertical + #panel { 
 
    margin-left:220px; 
 
    margin-top:0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="toggle">Toggle Layout</button> 
 
<br /><br /> 
 
<div id="responsive" class="vertical"> 
 
</div> 
 
<div id="panel">Here is the main page</div>

Answer 1

function hasClass(element, cls) { 
 
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; 
 
} 
 

 
$('#toggle').on('click', function() { 
 

 
    if ($('#responsive').hasClass('vertical')) { 
 
    $('#responsive').toggleClass('vertical'); 
 
    $('#container').toggleClass('vertical'); 
 
    $('#responsive').addClass('horizontal'); 
 
    $('#container').addClass('horizontal'); 
 
    } else { 
 
    $('#responsive').toggleClass('vertical'); 
 
    $('#container').toggleClass('vertical'); 
 
    $('#responsive').removeClass('horizontal'); 
 
    $('#container').removeClass('horizontal'); 
 
    } 
 
}); 
 

 
var blockString = "", 
 
    blocks = function() { 
 
    for (var i = 0; i < 80; i++) { 
 
     if (i != 40) { 
 
     blockString += '<span style="background-color: #' + (Math.random() * 0xFFFFFF << 0).toString(16) + '">' + i + '</span>'; 
 
     } else { 
 
     blockString += '<span style="background-color: #' + (Math.random() * 0xFFFFFF << 0).toString(16) + '">' + i + '</span><br/>'; 
 
     } 
 
    } 
 
    } 
 
blocks(); 
 

 
$('#container').append(blockString);

#responsive { 
 
    background-color: #eee; 
 
    height: 200px; 
 
    overflow-x: visible; 
 
    overflow-y: hidden; 
 
    padding: 5px; 
 
    border: 3px solid #aaa; 
 
} 
 
#responsive.vertical { 
 
    height: 400px; 
 
    width: 200px; 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 
#responsive.horizontal { 
 
    white-space: nowrap; 
 
} 
 
#container { 
 
    background-color: #eee; 
 
    display: inline-block; 
 
    height: 100%; 
 
    border: none; 
 
    overflow: hidden; 
 
    padding: 5px; 
 
    width: inherit; 
 
} 
 
#container.vertical { 
 
    height: 400px; 
 
    width: 95%; 
 
    float: left; 
 
    border: none; 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
} 
 
#container > span { 
 
    width: 130px; 
 
    height: 50px; 
 
    display: inline-block; 
 
    margin: 5px; 
 
} 
 
#panel { 
 
    background-color: #eee; 
 
    height: 400px; 
 
    padding: 5px; 
 
    border: 3px solid #aaa; 
 
    margin-left: 0px; 
 
    margin-top: 5px; 
 
} 
 
#responsive.vertical + #panel { 
 
    margin-left: 220px; 
 
    margin-top: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="toggle">Toggle Layout</button> 
 
<br /> 
 
<br /> 
 
<div id="responsive" class="vertical"> 
 
    <div id="container" class="vertical"> 
 

 
    </div> 
 
</div> 
 
<div id="panel">Here is the main page</div>