Css 即使在单亲中也要放置Div，并将另一个Div移到中间_Css_Dom

Css 即使在单亲中也要放置Div，并将另一个Div移到中间

css dom

Css 即使在单亲中也要放置Div，并将另一个Div移到中间,css,dom,Css,Dom,如您所见，有两个父div，侧栏和说明，以及侧栏中的两个子div。我已经为他们给出了css规则，如下图所示：问题：如何在不更改标记的情况下使用这些标记创建这样的视图 *注意：如果窗口的宽度则第二个是视图，这可能不是一种明智的方法，但下面的代码可以解决您的问题： HTML: 希望这能有所帮助。我认为将这两个div保留在侧边栏中（不使用javascript）是不可能的。然而，你可以这样做，这对我来说更有意义，因为它将描述放在标题之后 .description2{ display:none

如您所见，有两个父div，

侧栏

和

说明

，以及

侧栏

中的两个子div。我已经为他们给出了css规则，如下图所示：

问题：如何在不更改标记的情况下使用这些标记创建这样的视图

*注意：如果窗口的宽度则第二个是视图，这可能不是一种明智的方法，但下面的代码可以解决您的问题：

HTML:

希望这能有所帮助。

我认为将这两个div保留在侧边栏中（不使用javascript）是不可能的。然而，你可以这样做，这对我来说更有意义，因为它将描述放在标题之后

.description2{
    display:none;
}
@media only screen and (max-width: 320px) { 
    .description{
       display:none;
    }
    .description2{
       display:block;
    }
}


媒体查询
标题
描述
.相关{
背景色：#333；
保证金：5px；
}
@仅媒体屏幕
和（最小宽度：620px）{
.持有人{
宽度：620px；
}
.头衔{
浮动：对；
宽度：200px；
高度：200px；
}
.说明{
浮动：左；
宽度：400px；
高度：600px；
}
.相关{
浮动：对；
宽度：200px；
高度：390px；
}
}

借助CSS媒体查询。参考：正如@VaibhavJain所说，您可以使用媒体查询来决定显示哪个屏幕，但我认为如果不更改标记，您无法做到这一点，因为描述始终位于标题和相关持有者之下。我使用了@media query，但问题是，

title

和

related

在单亲中（

侧栏

），所以我很难将它们分开，并在它们之间移动

描述，为什么不更改标记？如果您的标记不代表内容的结构顺序/重要性，那么它可能应该更改。关于这个问题，我唯一能建议的是使用绝对定位和一些javascript来计算高度和位置，这将是一个“不自然”的解决方案。
 <div class="sidebar">
     <div class="title"></div>
     <div class="description2"> description ...</div>
     <div class="related"></div>
 </div>
 <div class="description"> description ... </div>

.description2{
    display:none;
}
@media only screen and (max-width: 320px) { 
    .description{
       display:none;
    }
    .description2{
       display:block;
    }
}

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Media query</title>
<style>
.title,
.description,
.related {
    background-color: #333;
    margin: 5px;
}
@media only screen 
and (min-width : 620px) {
    .holder {
        width: 620px;
    }
    .title {
        float: right;
        width: 200px;
        height: 200px;
    }
    .description {
        float: left;
        width: 400px;
        height: 600px;
    }
    .related {
        float: right;
        width:200px;
        height: 390px;
    }
}
</style>
</head>

<body>
<div class="holder">
    <div class="title"></div>
    <div class="description"></div>
    <div class="related"></div>
</div>

</body>
</html>