使用display来阻止div:来自拉伸的table-cell

Question

使用display来阻止div:来自拉伸的table-cell

我有以下HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
    <title>Table-cell issue</title>
    <style type="text/css">
        html, body { height: 100%; }
        .table
        {
            display: table;
            height: 100%;
        }
        .row
        {
            display: table-row;
        }
        .aside
        {
            display: table-cell;        
        }
        .center
        {
            background-color: red;
            display: table-cell;
            width: 100%;
        }
        .wide
        {
            background-color: green;
            width: 16000px;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="row">
        <div class="aside">
            Left column
        </div>
        <div class="center">
            <div class="wide">&nbsp;</div>
        </div>
        <div class="aside">
            Right column
        </div>
        </div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

问题是div.center伸展以适应其内容,而div.table意味着占据整个视口,div.center内容的其余部分应该是不可见的.overflow:hidden像素(例如900px)中的明确宽度设置都没有帮助.

对于如何解决这个问题,我会非常感激.

Answer 1

Spl*_*iFF 5

使用table-layout:fixed上表格。这将禁用自动调整单元格大小，并且只会使中心尽可能宽。

归档时间：	15 年前
查看次数：	5449 次
最近记录：	15 年前