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

您必须使用定义内容宽度

HTML CODE

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

Jeet：固定宽度侧边栏，带有流体内容区域

1 个答案: