Question

我有代码（桌面）：

<div class="firstDiv">
     <div class="firstDivInside">...</div>
</div>
<div class="secondDiv">
   <div class="secondDivInside">...</div>
</div>

是否可以仅使用css将secondDivInside移至firstDiv？

@media screen and (max-width: 767px) {

}

我需要（在手机上）：

<div class="firstDiv">
     <div class="firstDivInside">...</div>
     <div class="secondDivInside">...</div>
</div>
<div class="secondDiv">
</div>

Answer 1

是否可以通过仅使用css将secondDivInside移动到firstDiv？

不......我不相信有一种方法（深奥与否）用CSS操纵/转移DOM的实际结构。

最低级别，尽管不优雅，将复制div并使用display：none / block显示/隐藏它。

然而，这似乎是一个基本的结构问题。为什么您的元素的排序方式必须彻底改变移动重新排序？

这篇文章讨论了设计网页时移动结构的优缺点......它是一个快速阅读，可以帮助您更好地概念化如何设计移动＆lt; - ＆gt;桌面。 https://codemyviews.com/blog/mobilefirst

Answer 2

您可以做的是：

<div class="firstDiv">
     <div class="firstDivInside">...</div>
     <div class="secondDivInsideMobile">...</div>
</div>
<div class="secondDiv">
   <div class="secondDivInside">...</div>
</div>

CSS

.secondDivInsideMobile {
   display:none;
}

@media only screen and (max-width: 500px) {
    .secondDivInsideMobile  {
        display:auto;
    }
     .secondDivInside {
        display:none;
     }
}

Answer 3

您无法使用CSS操纵DOM，但您可以使用flexbox来获得一个看起来像所需标记的布局。

结帐并使用此页面：）

http://the-echoplex.net/flexyboxes/

Answer 4

您无法使用css操纵DOM，但这可能是您的解决方案：

.firstDiv {
  height: 100px;
  background-color: yellow;
}
.secondDiv {
  height: 100px;
  background-color: green;
  margin-top: 100px;
}

@media (max-width: 768px){
  .secondDiv {
    background: none !important;
    height: unset !important;
    margin-top: unset !important;
  }
}

<div class="firstDiv">
  <div class="firstDivInside">...</div>
  <div class="secondDiv">
     <div class="secondDivInside">...</div>
  </div>
</div>

这个小提琴的解决方案：https://jsfiddle.net/y35wkpgt/

Answer 5

基本上你不能使用 CSS 移动div，但你可以根据视口显示和隐藏 div 。这是一个例子，我希望它会对你有所帮助。

<强> HTML

<div class="firstDiv">
     <div class="firstDivInside">...</div>
     <div class="secondDivInside">...</div>
</div>
<div class="secondDiv">
   <div class="secondDivInside">...</div>
</div>

的 CSS

.secondDivInside { display: none; } .secondDiv .secondDivInside { display: block; } @media screen and (max-width: 767px) { .secondDivInside { display: block; } .secondDiv { display: none; } }

Answer 6

您可以使用 flexbox .. ORDER

Ecto.Adapters.SQL.query!(
  MyApp.Repo,
  "CREATE INDEX zip_code_trgm_idx ON $1 USING GIN (zip_code gin_trgm_ops);",
  ["locations_zipcodes"]
)

[debug] QUERY ERROR db=0.0ms queue=19.5ms
CREATE INDEX zip_code_trgm_idx ON $1 USING GIN (zip_code gin_trgm_ops); ["locations_zipcodes"]
** (Postgrex.Error) ERROR 42601 (syntax_error) syntax error at or near "$1"

CSS将一个div移动到另一个div

6 个答案: