Question

我需要以这种方式进行布局：

<input type="checkbox" ng-model="data.data" ng-value="yes" /> ready?

我希望整体宽度为身体的100％，导航宽度为15％，但最小宽度为120px。条形的宽度（即内容div中的元素）必须是内容div的100％。

在html中，我有一个限制，导航div必须在内容div之前。

编辑：我在html中的代码是

----------------------
|   header           |
----------------------
|  N  |              |
|  A  |   CONTENT    |
|  V  |              |
|-----|              |
|     | ----BAR----  |
|EMPTY|              |
|     |              |
----------------------

我现在在css中的代码是：

<div id="main">
<div id="header"></div>
<div id="nav"></div>
<div id="content><p id="bar">Title of paragraph</p></div>
</div>

你能帮我吗？

Answer 1

我更喜欢flexbox方法，但请记住，这不适用于IE9及以下版本。

Flex-basis（又名flex: {shrink} {grow} {flex-basis}）是必需的，因为flex与css宽度不兼容。

*{
  margin: 0;
  padding: 0;
}

header{
  padding: 10px;
  width: 100%;
  background: #888;
}

.sidebar{
  padding: 10px;
  flex: 0 0 120px;
  background: #07f;
}

.content{
  padding: 10px;
  background: #ddd;
  width: 100%;
}

.container{
  display: flex;
  flex-direction: row;
}

<header>
  This is the header
</header>

<div class="container">
  <div class="sidebar">
     This is the sidebar
  </div>

  <div class="content">
    This is the content
    <br>
    test
  </div>
</div>

Answer 2

此方法是静态的，不允许百分比（您必须对其他屏幕尺寸使用媒体查询。）

＆＃13;

*{
  margin: 0;
  padding: 0;
}

header{
  padding: 10px;
  width: 100%;
  background: #888;
}

.sidebar{
  box-sizing: border-box;
  float:left; 
  background: #06f;
  display:block;
  width: 120px;
  padding: 10px;
}

.content{
  box-sizing: border-box;
  padding: 10px;
  display:block;
  background:#ddd;
  margin-left: 120px;
}

＆＃13;

<header>This is the header</header>
<div class="sidebar">
   This is the sidebar
</div>
<div class="content">
  This is the content
  <br>
  test
  <br>
  test
  <br>
  test
</div>

＆＃13;

Css流体布局有两列

2 个答案: