简单的CSS表格布局无法按预期工作 [英] Simple CSS table layout not working as intended

问题描述

我正在努力实现以下设置：

 | div适合内容| margin 48px | -----拉伸----- | 

所以左边的div需要保证金：0 48px 0 0，需要适合其内容，右边的div需要水平拉伸以适应父母的剩余宽度。



我已经尝试将父母设置为

display：table;

宽度：100％;



使用不同的宽度组合，显示：table-cell等列，但似乎没有任何效果。



有一点需要注意，左边和右边的div必须都填充父母的高度。

 | div适合内容| | ----- s t e t d h d ----- | 
 | | margin 48px | | 
 | - 更多内容 -  | | - 延伸到这里 -  | 

让这个简单的布局工作会很棒。



我尝试过：



所有提到的问题。

---------------------------------

解决方案

如果您可以放弃对IE10及更早版本的支持，Flexbox将是一个简单的解决方案：

 <  < span class =code-leadattribute> div     class   = 包装 >  
 <   div  >  
 Div适合内容<   br     /  >  
更多内容<   br     /   >  
还有一些
 <   / div  < span class =code-keyword>>  
 <   div  >  
延伸
 <   / div  >  
 <   / div  >  

。包装器 
 {
 显示 ：  flex;  
} 
。 wrapper  >   div  
 {
  flex-grow  < span class =code-keyword>：  1;  
} 
。包装器 >   div：first-child  
 {
 < span class =code-attribute> margin-right  ：  48px;  
  flex-grow  ：  0;  
} 

演示 [ ^ ]

浏览器支持 [< a href =https://caniuse.com/#feat=flexboxtarget =_ blanktitle =New Window> ^ ]

Flexbox完整指南CSS-Tricks [ ^

Hi,

I'm trying to achieve the following setup:

| div fit to content |margin 48px| ----- s t r e t c h e d ----- |

So the left div needs margin: 0 48px 0 0, and needs to fit its content, and the right div needs to stretch horizontally to fit the remaining width of the parent.

I've tried setting the parent to
display: table;
width: 100%;

And using different combinations of widths, display: table-cell etc for the columns but nothing seems to work.

One thing to note, the left and right div must both fill the height of the parent.

| div fit to content |           | ----- s t r e t c h e d ----- |
|                    |margin 48px|                               |
| -- more content -- |           | -- stretched down to here  -- |

It would be great to get this simple layout working.

What I have tried:

Everything mentioned in question.
---------------------------------

解决方案

If you can drop support for IE10 and earlier, Flexbox would be a simple solution:

<div class="wrapper">
    <div>
        Div fit to content<br />
        More content<br />
        And some more
    </div>
    <div>
        Stretched
    </div>
</div>

.wrapper
{
    display: flex;
}
.wrapper > div
{
    flex-grow: 1;
}
.wrapper > div:first-child
{
    margin-right: 48px;
    flex-grow: 0;
}

Demo[^]
Browser support[^]
A Complete Guide to Flexbox | CSS-Tricks[^]

这篇关于简单的CSS表格布局无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！