如何根據瀏覽器大小更改元素的順序？

Question

我有三個水平堆疊的按鈕。 單擊每個按鈕都會顯示一個div元素。 當瀏覽器調整為移動視圖大小時，我希望元素垂直堆疊。 默認情況下會發生這種情況，但是我想將div元素直接堆疊在與其關聯的按鈕下。

這是我要顯示的內容 （桌面左側，移動右側）：

這是我得到的（桌面左側，移動右側）：

這是基本的HTML。 如果將關聯的div直接移到按鈕下方，則在移動設備上看起來不錯，但在桌面上卻不正確。

<button onclick="updateValue(1)">Button 1</button>
<button onclick="updateValue(2)">Button 2</button>
<button onclick="updateValue(3)">Button 3</button>
<div id="div-1"><span>This is div 1!</span></div>
<div id="div-2"><span>This is div 2!</span></div>
<div id="div-3"><span>This is div 3!</span></div>

我確實嘗試在按鈕上使用浮點數，但無法獲得所需的輸出。 這是一個小提琴，顯示了我現在所擁有的。

JSFIDDLE

那么，如何在桌面上為元素按鈕+按鈕+按鈕> div以及按鈕> div>按鈕>移動設備上的元素排序？

Answer 1

首先，將每個div移到其各自的按鈕下。

<button onclick="updateValue(1)">Button 1</button>
<div id="div-1"><span>This is div 1!</span></div>
<button onclick="updateValue(2)">Button 2</button>
<div id="div-2"><span>This is div 2!</span></div>
<button onclick="updateValue(3)">Button 3</button>
<div id="div-3"><span>This is div 3!</span></div>

然后，使用CSS媒體查詢，您可以將div絕對以桌面大小放置在按鈕行下方，然后將其通常放置為移動大小。

button {
  display: block;
}
div {
  display: none;
}
.show {
  display: block;
}

@media (min-width: 768px) {
  button {
    display: inline;
  }
  .show {
    position: absolute;
    top: 30px;
  }
}

這是一個有用的例子 。

Answer 2

@Lefka是使用flexbox模型的示例。
當您在全頁視圖中將示例的大小調整為小於420px時，元素將按照您期望的方式重新排序。
希望它能幫助您弄清您的需求。

 function updateValue(newValue) { for (i = 1; i <= 3; i++) { var element = document.getElementById("div-" + i); element.className = ""; if (newValue === i) { element.className = "show"; } } } 

 div { display: none; } .show { display: block; } .flex-parent { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: stretch; align-items: flex-start; } button { flex: 0 0 auto; } [id^="div-"] { flex: 1 1 100%; } @media screen and (max-width: 420px) { .flex-parent { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: flex-start; } .button-1 { order: 0; } .button-2 { order: 2; } .button-3 { order: 4; } #div-1 { order: 1; } #div-2 { order: 3; } #div-3 { order: 5; } } 

 <div class="flex-parent"> <button class="button-1" onclick="updateValue(1)">Button 1</button> <button class="button-2" onclick="updateValue(2)">Button 2</button> <button class="button-3" onclick="updateValue(3)">Button 3</button> <div id="div-1"><span>This is div 1!</span></div> <div id="div-2"><span>This is div 2!</span></div> <div id="div-3"><span>This is div 3!</span></div> </div> 

Answer 3

您可以添加一個新的DIV嗎？

 <div> <button onclick="updateValue(1)">Button 1</button> <button onclick="updateValue(2)">Button 2</button> <button onclick="updateValue(3)">Button 3</button> </div> <div id="div-1"><span>This is div 1!</span></div> <div id="div-2"><span>This is div 2!</span></div> <div id="div-3"><span>This is div 3!</span></div> 

Answer 4

將Button1和Div1以及寬度= button的寬度和溢出設置為可見，一起放入容器div中。 必要時重復其他按鈕。 如果需要，加寬div。

<div id=superContainer>
    <div id=subContainer1>
        <button onclick="updateValue(1)">Button 1</button>
        <div id="div-1"><span>This is div 1!</span></div>
    </div>
    <div id=subContainer2>
        <button onclick="updateValue(2)">Button 2</button>
        <div id="div-2"><span>This is div 2!</span></div>
    </div>
    <div id=subContainer3>
        <button onclick="updateValue(3)">Button 3</button>
        <div id="div-3"><span>This is div 3!</span></div>
    </div>
</div>

Answer 5

 function updateValue(div) { $('DIV > DIV').hide(); $('#div-'+ div).show() } 

 .parent{position:relative} DIV > DIV{display:none; position:absolute} @media (max-width: 480px) { DIV > DIV{display:none; position:relative} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <button onclick="updateValue(1)">Button 1</button> <div id="div-1"><span>This is div 1!</span></div> <button onclick="updateValue(2)">Button 2</button> <div id="div-2"><span>This is div 2!</span></div> <button onclick="updateValue(3)">Button 3</button> <div id="div-3"><span>This is div 3!</span></div> </div>