CSS Float with blocks

Question

我有一个问题，我怎么能修复块？

1. 阻止补充工具栏

   .sidebar {
       display: block;
       width: 250px;
       float: left;
       height: 100%;
       background-color: #2b2b2b;
       margin-right: 15px;
   }
   

2. 阻止内容

   .content-panel {
       margin-right: 15px;
       margin-top: 15px;
   }
   

问题： image

我如何修复内容块？我必须确保单元没有考虑侧边栏的宽度，而它的宽度是100％，侧边栏250px

Answer 1

使用

.content-panel {
    width: calc(100% - 280px);
    margin-left: 265px;
    margin-right: 15px;
    margin-top: 15px;
}

该宽度减去侧边栏的宽度，所有边距从100％减去，左边距将其向右移动。

Answer 2

您也可以仅使用margin-left获取内容区块宽度100% - 250px：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.sidebar {
  background: lightblue;
  float: left;
  height: 100vh;
  width: 250px;
}

.content {
  margin-left: 250px;
  padding: 16px;
  height: 100vh;
  background: gold;
}

<div class="sidebar"></div>
<div class="content">Content</div>