Question

我是CSS的初学者，需要帮助提出建议。

我正在处理一个项目，我设法将container_main放在container_menu旁边，给出屏幕的剩余维度，给出相对位置并将其浮动到右侧。 container_menu具有指定的维度和固定位置。

＆＃13;

body {
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

/*Contenedor de la barra de navegacion: Columna*/
.container_menu {
  height: 100%;
  width: 18rem;
  /*display: inline-block;*/
  position: fixed;
  background-color: gray;
}

/*Barra de navelación: Elemento <ul>*/
.container_menu .menu {
  width: 100%;
  padding: 0;
}

.container_menu ul {
  list-style-type: none;
}

.container_menu .menu li a{
  color: white;
  display: block;
  padding: 1rem 1.5rem;
  background-color: gray;
}

.container_menu .menu li a:hover {
  color: white;
  background-color: black;
}

.container_main {
  height: 100%;
  width: 66.31rem;
  background-color: black;
  position: relative;
  float: right;
}

p {
  color: white;
  background-color: blue;
  width: 30rem;
  height: 20rem;
  border: .7rem solid white;;
  padding: 5rem;
  margin: 10rem;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
  <title>MDN - Mockup</title>
</head>
<body class="wrapper">
  <nav class="container_menu">

    <ul class="menu">
      <li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li>
      <li><a href="#">Web Literacy</a></li>
      <li><a href="#">Leadership Opportunities</a></li>
      <li><a href="#">Tools</a></li>
      <li><a href="#">Comunity</a></li>
    </ul>
  </nav>

  <main class="container_main">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
       ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
       laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
       voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
       non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
       ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
       laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
       voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
       non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  </main>

  <<footer></footer>

</body>
</html>

＆＃13;

我想知道我给容器的特性是否理想，或者是否有更好的方法可以使用其他属性获得相同的结果。

谢谢。

Answer 1

查看您的代码和要求我没有看到您实现的方式存在问题所以我的答案是您的实现都很好并且不需要任何更改。我在自己的几个网站上使用了相同的方法。

在CSS

1 个答案: