旧版浏览器的后备选项扩展为可用高度

时间：2018-02-10 17:19:47

标签： html css html-table

我知道我可以使用flexbox将所有孩子都安排到最大的高度，但我想为IE10和朋友选择一个后退选项：

我认为我可以使用display: table和display: table-cell，但它似乎不喜欢固定的高度，我认为table-layout: fixed仅适用于调整到第一个单元格的高度这是最大的。

＆＃13;
＆＃13; 
html {
  box-sizing: border-box;
}

*,
:after,
:before {
  box-sizing: inherit;
}

.wrap {
  padding-left: 16px;
  padding-right: 16px;
}

.gel-layout {
  list-style: none;
  direction: ltr;
  text-align: left;
  margin-right: 0;
  margin-left: -8px;
  padding-right: 0;
  padding-left: 0;
}

.gel-layout--equal {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.gel-1\/3 {
  width: 33.33333333%!important;
}

.gel-layout__item {
  width: 100%;
  display: inline-block;
  padding-left: 8px;
  text-align: left;
  vertical-align: top;
}

.gel-layout--equal>.gel-layout__item {
  display: table-cell;
}

.gel-c-grid-demo-item {
  width: 100%;
  padding: 8px;
  background-color: #d4e7eb;
  color: #121212;
}

.gel-c-grid-demo-item--auto {
  height: auto;
}

.gel-c-grid-demo-item--fill {
  background: repeating-linear-gradient(180deg, #d4e7eb, #d4e7eb 8px, #aec4cc 0, #aec4cc 16px);
}

.gel-c-grid-demo-item--first {
  height: 72px;
}

.gel-c-grid-demo-item--large {
  height: 144px;
}
＆＃13; 
<div class="wrap">
  <div>
    <h2>Equal Height</h2>
    <div class="gel-layout gel-layout--equal">
      <div class="gel-layout__item gel-1/3 left">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--auto gel-c-grid-demo-item--fill gel-c-grid-demo-item gel-c-grid-demo-item--first">one</div>
      </div>
      <div class="gel-layout__item gel-1/3">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--fill">two</div>
      </div>
      <div class="gel-layout__item gel-1/3">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--large gel-c-grid-demo-item--fill">three</div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

我已经评论了高度，并添加了height:1px作为黑客将高度设置为最大值并为内部子项添加display:inline-table;以修复@Stickers指向的Firefox上的问题

＆＃13;
＆＃13; 
html {
  box-sizing: border-box;
}

*,
:after,
:before {
  box-sizing: inherit;
}

.wrap {
  padding-left: 16px;
  padding-right: 16px;
}

.gel-layout {
  list-style: none;
  direction: ltr;
  text-align: left;
  margin-right: 0;
  margin-left: -8px;
  padding-right: 0;
  padding-left: 0;
}

.gel-layout--equal {
  display: table;
  table-layout: fixed;
  width: 100%;
  height:1px; /* a hack to set the height of the children equal */
}

.gel-1\/3 {
  width: 33.33333333%!important;
}

.gel-layout__item {
  width: 100%;
  display: inline-block;
  padding-left: 8px;
  text-align: left;
  vertical-align: top;
}

.gel-layout--equal>.gel-layout__item {
  display: table-cell;
}

.gel-c-grid-demo-item {
  width: 100%;
  padding: 8px;
  background-color: #d4e7eb;
  color: #121212;
  height: 100%; /* added this height to make the height equal to the greatest element */
  display:inline-table; /* to fix firefox issue */
}

.gel-c-grid-demo-item--auto {
  /*height: auto; commented this height */
}

.gel-c-grid-demo-item--fill {
  background: repeating-linear-gradient(180deg, #d4e7eb, #d4e7eb 8px, #aec4cc 0, #aec4cc 16px);
}

.gel-c-grid-demo-item--first {
  /*height: 72px; commented this height*/
}

.gel-c-grid-demo-item--large {
  height: 144px;
}
＆＃13; 
<html>

<body>
  <div class="wrap">
    <div>
      <h2>Equal Height</h2>
      <div class="gel-layout gel-layout--equal">
        <div class="gel-layout__item gel-1/3 left">
          <div class="gel-c-grid-demo-item gel-c-grid-demo-item--auto gel-c-grid-demo-item--fill gel-c-grid-demo-item gel-c-grid-demo-item--first">one</div>
        </div>
        <div class="gel-layout__item gel-1/3">
          <div class="gel-c-grid-demo-item gel-c-grid-demo-item--fill">two</div>
        </div>
        <div class="gel-layout__item gel-1/3">
          <div class="gel-c-grid-demo-item gel-c-grid-demo-item--large gel-c-grid-demo-item--fill">three</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

另一个内容很大的版本

＆＃13;
＆＃13; 
html {
  box-sizing: border-box;
}

*,
:after,
:before {
  box-sizing: inherit;
}

.wrap {
  padding-left: 16px;
  padding-right: 16px;
}

.gel-layout {
  list-style: none;
  direction: ltr;
  text-align: left;
  margin-right: 0;
  margin-left: -8px;
  padding-right: 0;
  padding-left: 0;
}

.gel-layout--equal {
  display: table;
  table-layout: fixed;
  width: 100%;
  height:1px; /* a hack to set the height of the children equal */
}

.gel-1\/3 {
  width: 33.33333333%!important;
}

.gel-layout__item {
  width: 100%;
  display: inline-block;
  padding-left: 8px;
  text-align: left;
  vertical-align: top;
}

.gel-layout--equal>.gel-layout__item {
  display: table-cell;
}

.gel-c-grid-demo-item {
  width: 100%;
  padding: 8px;
  background-color: #d4e7eb;
  color: #121212;
  height: 100%; /* added this height to make the height equal to the greatest element */
  display:inline-table;/* to fix firefox issue */
}

.gel-c-grid-demo-item--auto {
  /*height: auto; commented this height */
}

.gel-c-grid-demo-item--fill {
  background: repeating-linear-gradient(180deg, #d4e7eb, #d4e7eb 8px, #aec4cc 0, #aec4cc 16px);
}

.gel-c-grid-demo-item--first {
  /*height: 72px; commented this height*/
}

.gel-c-grid-demo-item--large {
  /*height: 144px;*/
}
＆＃13; 
<div class="wrap">
  <div>
    <h2>Equal Height</h2>
    <div class="gel-layout gel-layout--equal">
      <div class="gel-layout__item gel-1/3 left">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--auto gel-c-grid-demo-item--fill gel-c-grid-demo-item gel-c-grid-demo-item--first">one</div>
      </div>
      <div class="gel-layout__item gel-1/3">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--fill">two</div>
      </div>
      <div class="gel-layout__item gel-1/3">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--large gel-c-grid-demo-item--fill">three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

  • 删除div .item并压缩所有类。 display:table或display:table-row必须是display:table-cell的父（直接祖先），以便正常的表行为（如同等高度）可以正常工作。

  • 已将border-spacing应用于display:table。表组件忽略边距，因此需要使用边界间距将每个框分隔并定义为单独的单元格。

  • 删除.gel-1\/3虽然有效但是有效且无效，因为display:table-cell / display:table / table-layout下的width:100%已经使得单元格成为33.33％ 。

  • 当缩小所有类时，我想确保没有带有双连字符--的类，因为它们被CSS变量使用但它们是有效的，只是不完全安全。

演示

＆＃13;
＆＃13; 
html {
  box-sizing: border-box;
}

*,
:after,
:before {
  box-sizing: inherit;
}

.wrap {
  padding-left: 16px;
  padding-right: 16px;
}

.table {
  display: table;
  table-layout: fixed;
  border-spacing: 5px;
  width: 100%;
}

.cell {
  text-align: left;
  vertical-align: top;
  display: table-cell;
  padding: 8px;
  background-color: #d4e7eb;
  color: #121212;
  /*outline:2px solid red;*/
  background: repeating-linear-gradient(180deg, #d4e7eb, #d4e7eb 8px, #aec4cc 0, #aec4cc 16px);
}

.first {
  height: 72px;
}

.large {
  height: 144px;
}
＆＃13; 
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>

</style>
</head>
  <body>
    <div class="wrap">
  
        <h2>Equal Height</h2>
        <div class="table">

            <div class="cell first">one</div>

            <div class="cell">two</div>

            <div class="cell large">three</div>
 
        </div>
      </div>
    
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题