集装箱全宽

时间:2017-08-15 11:59:07

标签: html css sass less

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

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

.container {
  width: 100%;

  .sidebar {
    width: 280px;
  }

  .home {
    width: 100%;
  }
}

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

5 个答案:

答案 0 :(得分:2)

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

.home的CSS解决方案



#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;
}

<div id="container">
  <div class="sidebar">SideBar</div>
  <div class="home">Home</div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

以下将创建一个固定宽度为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>

答案 2 :(得分:0)

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

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

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

  .home {
    width:auto;
  }
}

答案 3 :(得分:0)

您似乎需要了解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>

答案 4 :(得分:0)

如果你想让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);
}