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

【问题标题】：Jeet: Fixed width sidebar with fluid content areaJeet：具有流体内容区域的固定宽度侧边栏
【发布时间】：2017-02-27 06:22:45
【问题描述】：

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

HTML：

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

CSS：

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

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

【问题讨论】：

要求我们建议、查找或推荐书籍、工具、软件库、插件、教程、解释技术或提供任何其他场外资源的问题对于 Stack Overflow Stack 来说是题外话溢出
我改写了这个问题，我只是在另一个问题上使用了不同的框架@stackoverflow.com/questions/21967723/…

标签： css jeet-grid

【解决方案1】：

你必须使用定义内容宽度

HTML 代码

<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/

【讨论】：

感谢@Shahzeib Ali 的回答。但是我正在寻找一个固定宽度的侧边栏。 Jeet 确实提供了 % width 列。
嗨 @tamilsweet 如果您需要固定宽度的侧边栏，那么您必须使用 div 表格样式。请查看此链接jsfiddle.net/568447zu/2
再次感谢，整洁的实现。