Question

首先，抱歉标题不是很明确

这是我的问题：我是容器，里面有一个280px的侧边栏，我想让主页全宽。但如果我写这样的东西

.container {
  width: 100%;

  .sidebar {
    width: 280px;
  }

  .home {
    width: 100%;
  }
}

主页位于下方，我想将侧边栏放在一边。但我不知道该怎么做

Answer 1

以下是使用calc() function minus来自.sidebar width

的.home的CSS解决方案

＆＃13;

#container {
  width: 100%;
  height: 300px;
}

#container .sidebar {
  width: 280px;
  height: 100%;
  background: blue;
  display: inline-block;
  color:#fff;
}

#container .home {
  width: calc(100% - 285px);
  height: 100%;
  background: yellow;
  display: inline-block;
}

＆＃13;

<div id="container">
  <div class="sidebar">SideBar</div>
  <div class="home">Home</div>
</div>

＆＃13;

Answer 2

以下将创建一个固定宽度为280px的侧边栏和一个具有流体宽度的div（.home）：

<强> SCSS

.container {
  width: 100%;
  overflow:hidden;

  .sidebar {
    float:right; /* or float:left for left sidebar */
    width:280px;
  }

  .home {
    margin-right:280px; /* or margin-left for left sidebar */
  }
}

<强> HTML

<div class="container">
  <div class="sidebar">

  </div>
  <div class="home">

  </div>
</div>

Answer 3

这应该有效： https://jsfiddle.net/0bsygLsh/

.container {
  width: 100%;
  overflow:hidden;

  .sidebar {
    width:280px;
    display:inline-block;
    float:left;
  }

  .home {
    width:auto;
  }
}

Answer 4

您似乎需要了解CSS 显示属性。在处理CSS时，这可能是最重要的事情。见https://www.w3schools.com/cssref/pr_class_display.asp

以下是使用display: flex解决问题的示例。您的问题可以通过多种方式解决。请考虑使用display: inline自行尝试。

.container {
  display: flex;
  height: 100vh;
}

.sidebar {
  flex-basis: 100px;
  background-color: red;
}

.home {
  flex: 1;
  background-color: blue;
}

<div class="container">
  <div class="sidebar">
    I'm the sidebar
  </div>
  <div class="home">
    I'm the home page
  </div>
</div>

Answer 5

如果你想让home div全宽并且侧边栏div应该在它之上，那么css将会跟随：

    .container {
      width: 100%;
      position: relative;
    }
   .sidebar {
      width: 280px;
      position: absolute;
      top: 0;
      left: 0;
   }

   .home {
      width: 100%;
      padding-left: 280px;
   }

或者如果你想将它们并排放置，那么css应该遵循：

.container {
      width: 100%;
}
.container:after {
    display: table;
    content: "";
    clear: both;
}
.sidebar {
   float: left;
   width: 280px;
}

.home {
   float: left;
   width: calc(100% - 280px);
}

集装箱全宽

5 个答案: