Question

我想为我的php组分配项目形状做主页，如下所示：

但是，它变得很糟糕并且不正确，如下所示： masterpage image 2

如何确保内容区域和标题在正确的位置且彼此不重叠。

这是我的母版页代码：的CSS

<style>
/* The sidebar menu */

.sidebar {
  height: 100%;
  width: 250px;
  /* Set the width of the sidebar */
  position: fixed;
  /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  left: 0;
  background-color: #262626;
  /* Dark */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 20px;
  color: #cccccc;
  /* text colour */
  text-align: justify;
  position: absolute;
}


/* The navigation menu links */

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #cccccc;
  /*#818181 */
  display: block;
}

.main {
  margin-left: 160px;
  /* Same as the width of the sidebar */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

.img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

.header-banner {
  position: absolute;
  right: 0px;
}

</style>

HTML

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>

  <div class="sidebar">
    <img class="img" src="/image/logo.png" alt="symbol" style="width:200px;height:125px;" />

  </div>
  <div class="header-banner">
    <img class="banner" src="/image/banner.png" alt="header" style="width=1500px; height:150px;" />
  </div>

  <!-- Page content -->

</body>

</html>

Answer 1

尝试使用CSS网格。这是代码。莱姆知道它是否有效。标记：

<div class="wrapper">
 <div class="mini-wrapper sidebar">
   Sidebar
  </div>
  <div class="mini-wrapper header-top">
    Header-top
  </div>
  <div class="mini-wrapper content-area">
    Content Area
  </div>
</div>

CSS

body {
  margin: 40px;
}

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 200px 600px;
    background-color: #fff;
    color: #444;
    }

    .mini-wrapper {
        border:3px solid dodgerblue;
        padding: 20px;
        font-size: 150%;

    }

    .sidebar {
        grid-column: 1;
        grid-row: span 50;
    }
    .content-area{
        grid-column: 2 ;
        grid-row: span 49;
    }

    .header-top {
        grid-column: 2;
        grid-row:1;
    }

https://codepen.io/anon/pen/MPvLqE

如何用HTML的左侧边栏和标题创建母版页？

1 个答案: