Question

<div class="sidebar">
   <div class="title"></div>
   <div class="related"></div>
</div>
<div class="description"></div>

正如您所看到的，sidebar中有2个父div，description和sidebar以及2个子div。我已经为他们提供了css规则，如下图所示：

Aldi Unanto

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

Aldi Unanto

*注意：如果窗口的宽度<= 320px，则会查看第二个。我使用过@media查询，但问题是，title和related都在父母一方（sidebar）内，所以我很难将它们分开并移动{{1在他们中间。

由于

Answer 1

这可能不是一个聪明的方法，但下面的代码可以解决您的问题：

HTML：

 <div class="sidebar">
     <div class="title"></div>
     <div class="description2"> description ...</div>
     <div class="related"></div>
 </div>
 <div class="description"> description ... </div>

CSS：

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

希望这有帮助。

Answer 2

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

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

甚至在单个父级中放置Div，并将另一个div移动到中间

2 个答案: