居中固定宽度元素，div 填充额外空间答案

【问题标题】：center fixed-width element with divs filling the extra space居中固定宽度元素，div 填充额外空间
【发布时间】：2013-07-18 22:16:25
【问题描述】：

我正在创建一个具有图形显示的网页，该网页需要具有固定数量的像素宽才能正常运行。我希望它居中，并使用它左侧和右侧的区域来显示有关它的信息（表格）。

如果我能做到这一点，我会：

<div style="width: 50%-360px; float: left">
     <table>
         ...
     </table>
</div>
<div style="width: 50%-360px; float: right">
     <table>
         ...
     </table>
</div>
<div style="width: 720px">

（以及任何强制它们在一条线上的调整）。

当然这在语法上是错误的，但它应该给出我想要什么的想法。不过，现在缩小窗口会强制显示在表格下方，这不是我想要的。

我尝试切换到使用 inline-block 显示并将它们排列起来，但是当窗口缩小时，右表会在下一行结束。

有什么方法可以让我获得这种样式，它可以很好地调整大小，并允许我在表格太小时而不是水平滚动整个页面时将滚动条放在表格上？

【问题讨论】：

标签： html css layout css-float spacing

【解决方案1】：

如果我理解正确，你在两个 <table>s 之间有一些元素，整个事情必须居中。

如果是这种情况，请使用您想要的固定 width 创建一个 <table>。将其margin 设置为0 auto。当窗口较小时，这将处理居中并避免元素垂直堆叠的问题。

使表格只有一个表格行 (<tr>)。该表格行将包含三个单元格 (<td>)，一个用于左侧 <table>，一个用于元素，一个用于右侧 <table>。在每个单元格中，放置您的 <table>s / 元素的代码。

编辑（再次）：针对您的最后一条评论进行了更新（彩色 <td>s 内的所有内容都是垃圾）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Example</title>
    <style type="text/css">
        table {border-collapse:collapse;}
        td {padding:0;}
    </style>
</head>
<body>
    <table style="margin:0 auto; width:600px;">
        <tr>
            <td style="background:#f88;">
                <table>
                    <tr>
                        <td>Lorem Ipsum</td>
                        <td>Lorem Ipsum</td>
                    </tr>
                </table>
            </td>
            <td style="background:#8f8;">
                <div>Lorem Ipsum</div>
            </td>
            <td style="background:#88f;">
                <table>
                    <tr><td>Lorem Ipsum</td></tr>
                    <tr><td>Lorem Ipsum</td></tr>
                    <tr><td>Lorem Ipsum</td></tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

【讨论】：

以上是有效的 HTML5。你说你在使用<table>s，所以我举了一个使用它们的例子
我的意思是我想把表格放在侧面的 div 中。我在帖子中的代码似乎由于某种原因没有显示出来；我修好了它。现在应该清楚一点了。
这里唯一的区别是您将把<table>s 放在<td>s 中，而不是<div>s。
您的<td>s 都有固定的宽度。我通过将 display:table-cell 应用到我的<div>s 尝试了类似的方法，结果出现了一些奇怪的间距，但我认为最终这可能是要走的路。
可以移除/修改固定宽度。我指定它们只是为了表明它可以被控制。我不知道你为什么把display:table-cell;放在你的<div>s上，你应该能够把你的元素粘贴在适当的<td>中（这可能有助于给每个<td>你的元素进入里面的宽度, 600 也来自 150+300+150)。

【解决方案2】：

你没有给出任何代码，所以我有点猜测问题可能出在哪里。您是否尝试过使用媒体查询来调整特定窗口大小的布局？

如果我没有正确阅读问题，您应该能够以布局分解的任何大小添加 css 媒体查询。

只要添加滚动条就可以了

overflow:scroll

到你的表格的css。

【讨论】：