css - Jeet：具有流体内容区域的固定宽度侧边栏

Question

我试图弄清楚如何使用 Jeet 创建具有固定宽度侧边栏和流体内容区域的流体布局。

HTML：

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

CSS：

.wrapper {
    width: 100%;
}
.sidebar {
    width: 240px;
}

看起来 Jeet 无法将内容 css 设置为其余的布局，是这样吗？

Answer 1

您必须使用定义内容宽度

代码

<div class="wrapper">
    <div class="sidebar">
      <div class="content-box">
        Content Here !!!! 
      </div>
    </div>
    <div class="content">
    <div class="content-box">
        Content Here !!!! 
      </div>
    </div>
</div>

CSS 代码

.wrapper {
  color: #fff;
}
.sidebar {
  width:30%;
  display:inline-block;
  float: right;
  background: #333;
}
.content {
  width: 70%;
  display: inline-block;
  background: #666;
}
.content-box {
  padding: 20px;
}

请在此处查看演示https://jsfiddle.net/568447zu/