Question

我是CSS的相对新手。我的网站上有一个标题栏，如下所示：

我正在使用媒体查询来调整它以进行窄显示。我有一个菜单栏压缩到一个下拉列表并收缩徽标，但我想重新排序元素，使它们看起来像这样：

我无法找到一种方法来完成这项工作 - 我需要在div中包含标题和菜单栏，以便在第一个版本中将它们组合在一起，这意味着我无法安排它们，如第二版所示

是否存在可以生成顶部布局和底部布局的div系统，只更改CSS而不是HTML？

Answer 1

您可以使用CSS网格轻松解决此问题。在下面的代码段中，如果按Expand snippet，您将看到完整版。

我不确定“收缩菜单”是否应该像你的图形一样偏离网格，但如果不需要，你只需删除媒体查询中的width属性。

.wrapper {
  display: grid;
  grid-template-columns: 100px 270px;
  grid-template-rows: 57px 32px;
  grid-gap: 12px;
  grid-template-areas: 
    "logo header"
    "logo menu";
}

.wrapper > div {
  outline: 4px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  grid-area: logo;
}

.header {
  grid-area: header;
}

.menu {
  grid-area: menu;
}

@media (max-width: 700px) {
  .wrapper {
    grid-template-columns: 83px 213px;
    grid-template-rows: 57px 32px;
    grid-gap: 14px 9px;
    grid-template-areas: 
      "logo header"
      "menu .";
  }
  .menu {
    width: 100px;
  }
}

<div class="wrapper">
  <div class="logo">Logo</div>
  <div class="header">Page Title/header</div>
  <div class="menu">Menu Bar</div>
</div>

Answer 2

这是使用CSS解决同样问题的另一种解决方案。

CSS和HTML代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        h1, ul, li {
            margin:0;
            padding:0;
        }
        li {
            list-style-type:none;
        }
        .logo {
            width:50px;
            height:55px;
        }
        h1.heading, nav {
            margin-left:0.5em;
        }
        h1.heading, .logo, nav {
            border:2px solid #000;
        }
        .left {
            float:left;
        }
        nav {
            margin-top:0.25em;
        }
        @media screen and (max-width:414px) {
            section.left {
                float:none;
            }
            h1 {
                float:left;
            }
            nav {
                clear:both;
                float:left;
                margin-left:0;
           }
        }
    </style>
</head>
<body>
    <header>
        <div class="logo left"></div>
        <section class="left">
            <h1 class="heading">Page Title</h1>
            <nav>
                <ul>
                    <li>link 1</li>
                </ul>
            </nav>
        </section>
    </header>

</body>
</html>

使用css媒体查询重新排列元素

2 个答案: