有没有办法删除div但保留其元素?

时间:2019-03-28 22:24:12

标签: html css flexbox

对于不同的屏幕尺寸,我需要div内的元素位于其div之外。

我目前重复了html并将其隐藏在某些视口中,这显然不是理想的选择,但是我不确定是否还有另一种方法。

这是html台式机和平板电脑

<div class="container">

 <div class="one">
  <p>Content 1</p>
 </div>

 <p>Content 2</p>

</div>

这是移动设备所需的html

<div class="container">

 <p>Content 1</p>
 <p>Content 2</p>

</div>

因此,我可以对容器div中的所有项目使用flexbox命令

2 个答案:

答案 0 :(得分:4)

这是display:contents;https://caniuse.com/#feat=css-display-contents)的完美用例

.container {
  display:flex;
}

.one {
  display:contents;
} 

.one p:first-child {
 order:2;
}
<div class="container">

 <div class="one">
  <p>Content 1</p>
  <p>Content 3</p>
 </div>

 <p>Content 2</p>

</div>

答案 1 :(得分:0)

您可以尝试此操作(如果需要):

<div class="container">
  <div class="one d-none d-md-block">
    <p>Content 1</p>
  </div>

  <p class="d-block d-md-none">Content 1</p>

  <p>Content 2</p>
</div>

对于CSS部分:

.d-none {
  display: none;
}

.d-md-none {
  display: none;
}

.d-md-block {
  display: block;
}

// Extra small devices (portrait phones, less than 576px) 
@media (max-width: 575.98px) {
  .d-none {
    display: none;
  }

  .d-block {
    display: block;
  }
}

此方法实际上来自Bootstrap。但是,如果您不想使用它,则可以尝试将代码添加到HTMLCSS中。