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

那么如何订购元素按钮+按钮+按钮＆gt;桌面上的div和按钮＆gt; div>按钮＆gt;手机上的按钮？

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;
  }
}

这是fiddle with a working example。

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吗？

＆＃13;

<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>

＆＃13;

Answer 4

将Button1和Div1放入容器div中，width = button的宽度和溢出设置为可见。如有必要，请重复其他按钮。如果需要，可以加宽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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何根据浏览器大小更改元素的顺序？

5 个答案: