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

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

可以通过table/flex/grid (内容站在列中)显示float (内容并排)的几个选项:以下4种“简单”的方法

• 每个浏览器都能理解float
• table/table-cell自1998年起在CSS规范中使用(可从IE8.)
• 现在的浏览器可以使用Flex
• grid可以在Chrome和火狐浏览器上使用，如果测试用的是CSS。

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

​

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;
}

<h1>float layout</h1>
<div class="float">
  <div class="col-1-10 a">float float float float float float , I can grow </div>
  <div class="col-9-10 b">...</div>
</div>
<div class="float small">
  <div class="col-1-10 a">...</div>
  <div class="col-9-10 b">block block block block block block, I can shrink</div>
</div>

<h1>table layout</h1>
<div class="table">
  <div class="col-1-10 a">table-cell, I cannot grow unless content pieces are wider than the initial 85px (img, long word, .. ) </div>
  <div class="col-9-10 b">...</div>
</div>
<div class="table small">
  <div class="col-1-10 a"></div>
  <div class="col-9-10 b">table-cell table-cell table-cell, table-cell , I can shrink</div>
</div>

<hr/>
<hr/>
<h1>Flex layout</h1>
<div class="flex">
  <div class="col-1-10 a">flex flex flex flex flex , I can grow </div>
  <div class="col-9-10 b">...</div>
</div>
<div class="flex small">
  <div class="col-1-10 a"></div>
  <div class="col-9-10 b">flex flex flex flex flex , I can shrink</div>
</div>
<hr/>

<h1>grid layout</h1>
<div class="grid">
  <div class="col-1-10 a">grid cell , i can have a min and width or I can grow </div>
  <div class="col-9-10 b">...</div>
</div>
<div class="grid bis">
  <div class="col-1-10 a">grid cell , i can have a min and or share the pace with others </div>
  <div class="col-9-10 b">...</div>
</div>
<div class="grid small">
  <div class="col-1-10 a">...</div>
  <div class="col-9-10 b">grid cell , I can shrink</div>
</div>

​