示例1：浮点数，宽度和边距

Question

这里有很多关于这个主题的例子，但我所追求的是我似乎找不到答案的东西。

我想创建一个双列页面：导航（固定宽度）的左列，内容的右列（响应）。我想要的变化是我希望导航显示在桌面左侧和移动设备下方。

我有代码＆＃39;工作＆＃39;但问题是，右列的响应宽度是问题。

我的代码如下，任何指导都会非常有价值。

＆＃13;

.CF:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.CF { display:inline-block; }
.CF { display:block; }

.content {max-width: 1300px; margin: 0 auto; padding: 0 25px; display:block; }
	.information {display:block; background: lime;}
	.menu {display:block;  background: lightblue;}
	
@media all and (min-width: 992px) {
.content {padding: 0 50px; }
	.information {display:block; float: right; width: auto;  }
	.menu {width: 250px; float:right; }

}

＆＃13;

<div class="content CF">

<article class="information">
    Article Information
</article>

<nav class="menu">
    Menu
</nav>

</div>

＆＃13;

Answer 1

我会用flexbox解决这个问题。

当屏幕宽度超过991像素时，菜单下方位于左侧。否则它低于文章。

我已为可见度指定了颜色。

.content {
  display: flex;
  background: blue;
}

.menu {
  width: 100px;
  background: red;
}

.information {
  background: green;
  flex-grow: 1;
}

@media all and (max-width: 991px) {
  .content {
    flex-wrap: wrap;
  }
  .menu {
    order: 2;
  }
  .information {
    order: 1;
    min-width: 100%;
  }
}

<div class="content">
  <nav class="menu">
    Menu
  </nav>
  <article class="information">
    Article Information
  </article>
</div>

Answer 2

我建议您查看CSS Grid或Flexbox的布局。 Support for Grid is good.

使用网格的示例...

codepen

.content {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 25px;
  display: block;
  grid-template-columns: 250px 1fr;
}

.information {
  background: lime;
  order: 2;
}

.menu {
  background: lightblue;
}

@media all and (min-width: 992px) {
  .content {
    display: grid;
    padding: 0 50px;
  }
}

<div class="content CF">
  <article class="information">
    Article Information
  </article>
  <nav class="menu">
    Menu
  </nav>
</div>

Answer 3

你已经有两个很好的答案，但只是添加一些额外的选项，这里有5种不同的方法来实现同样的目标：

示例1：浮点数，宽度和边距

最兼容的方法适用于几乎所有浏览器。它还拥有最小的CSS足迹。

#example1 .fixedColumn {
  width: 180px;
  float: left;
}

#example1 .flexibleColumn {
  margin-left: 200px;
}

/* gratuituous styling */

.fixedColumn { background-color: #e84c1b; padding: 10px;} .flexibleColumn { background-color: #039be4; padding: 10px;} body { margin: 0; }

<div id="example1">

  <div class="fixedColumn">
    Fixed Column
  </div>
  
  <div class="flexibleColumn">
    Flexible Column
  </div>

</div>

示例2：CSS calc（）

与IE9 +兼容。如果您不需要向后兼容性，它是一个可靠的选择。

#example2.calc {
    overflow: hidden;
}
#example2.calc .fixedColumn {
    width: 180px;
    float: left;    
}
#example2.calc .flexibleColumn {
    width: calc(100% - 220px); /*200px for the fixed column and 20 for the left and right padding */
    float: left;  
}

/* gratuituous styling */

.fixedColumn { background-color: #e84c1b; padding: 10px;} .flexibleColumn { background-color: #039be4; padding: 10px;} body { margin: 0; }

<div id="example2" class="calc">

  <div class="fixedColumn">
    Fixed Column
  </div>
  <div class="flexibleColumn">
    Flexible Column
  </div>

</div>

示例3：显示为表

向后兼容性的另一个有力竞争者几乎可以全面运作，但仍然感觉像是一个让事情像桌子一样的小屋。

#example3.table {
  display: table;
  width: 100%;
}

#example3.table .fixedColumn {
  width: 180px;
  display: table-cell;
}

#example3.table .flexibleColumn {
  display: table-cell;
}

/* gratuituous styling */

    .fixedColumn { background-color: #e84c1b; padding: 10px;} .flexibleColumn { background-color: #039be4; padding: 10px;} body { margin: 0; }

<div id="example3" class="table">
  <div class="fixedColumn">
    Fixed Column
  </div>
  <div class="flexibleColumn">
    Flexible Column
  </div>
</div>

示例4：Flexbox

非常适合支持它的现代浏览器;简单直观。

#example4.flex {
  display: flex;
}

#example4.flex .fixedColumn {
  width: 180px;
}

#example4.flex .flexibleColumn {
  flex: 1;
}

/* gratuituous styling */

.fixedColumn { background-color: #e84c1b; padding: 10px;} .flexibleColumn { background-color: #039be4; padding: 10px;} body { margin: 0; }

<div id="example4" class="flex">

  <div class="fixedColumn">
    Fixed Column
  </div>
  <div class="flexibleColumn">
    Flexible Column
  </div>

</div>

示例5：网格

这里的所有技术Grid最后都支持浏览器。但如果您可以选择使用它，这是一个很好的选择。

#example5.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 200px 1fr;
  -ms-grid-rows: auto;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto;
}

#example5.grid .fixedColumn {
  -ms-grid-column: 1;
}

#example5.grid .flexibleColumn {
  -ms-grid-column: 2;
}

/* gratuituous styling */

.fixedColumn { background-color: #e84c1b; padding: 10px;} .flexibleColumn { background-color: #039be4; padding: 10px;} body { margin: 0; }

<div id="example5" class="grid">

  <div class="fixedColumn">
    Fixed Column
  </div>
  <div class="flexibleColumn">
    Flexible Column
  </div>

</div>

CSS - 2列网格。一个固定宽度，一个响应

3 个答案:

示例1：浮点数，宽度和边距

示例2：CSS calc（）

示例3：显示为表

示例4：Flexbox

示例5：网格