Question

我有两个div作为网格对齐：

<div>
    <div class="col-1-10 a">...</div>
    <div class="col-9-10 b">...</div>
</div>

我需要确保div类col-1-10的最小宽度为85 px，以根据要求提供一些内容。 div类col-9-10应该占用剩余的宽度。

目前我这样做：

.a{
    @media (max-width: 850px){
        width:85px;
    }
}

.b{
    @media (max-width: 850px){
        max-width:765px;
    }
}

这适用于第一个div，然而，第二个div被推到下方，而不是内联显示。我基本上希望第二个div的宽度为父div - 85的宽度，并且仅限CSS

任何帮助都将不胜感激。

提前致谢

Answer 1

{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=1000000&mimetype=image/svg+xml" },（并排内容）可以通过float / table / flex显示一些选项（内容列在列中）：这些4＆＃39; easy＆＃39;方式

grid
float / table在CSS规范中（可从IE 8中使用......）
table-cell现在可用于现在的浏览器
Flex可在Chrome和Firefox中使用。

下面的代码段测试浏览器中的行为：

＆＃13;

grid

＆＃13;

div {
  border: solid;
  padding:8px;
}

.a {
  margin-right: 8px;
}

.a {
  background: tomato;
}

.b {
  background: orange
}

.flex {
  display: flex;
}

.flex .a {
  min-width: 85px;
}

.flex .b {
  flex: 1;
}

.small {
  width: 200px;
}

.table {
  display: table;
  width: 100%;
  border-spacing: 8px;
  padding:0;
}

.table.small {
  width: 200px;
}

.table .a {
  display: table-cell;
  width: 85px;
}

.table .b {
  display: table-cell;
}

.float .a {
  float: left;
  min-width: 85px;
}

.float .b {
  overflow: hidden;
}

.flex,
.table,
.float,
.grid {
  margin: 1em auto;
}

.grid {
  display: grid;
  grid-template-columns: minmax(85px, 120px) 1fr;
}

.grid.bis {
  display: grid;
  grid-template-columns: minmax(85px, 1fr) 1fr;
}

＆＃13;

设置div的宽度相对于另一个div的宽度

1 个答案: