Question

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

如果我可以这样做，我会：

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

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

当然这在语法上是错误的，但它应该给出我想要的想法。但是现在，缩小窗口会强制显示在桌子下面，这不是我想要的。

我尝试切换到使用内联块显示并将它们排成一行，但当窗口缩小时，右边的表格会在下一行结束。

有没有什么方法可以让这种风格很好地重新调整大小，并允许我在桌子上放置滚动条，当它们变得太小而不是水平滚动整个页面时？

Answer 1

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

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

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

编辑（再次）：更新了您的上一条评论（彩色<td>内的所有内容都是垃圾）：

<!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>

Answer 2

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

如果我正确地阅读了这个问题，你应该能够以任何大小的布局分解来添加css媒体查询。

就滚动条添加

overflow:scroll

给你的css表。

中心固定宽度元素，div填充额外的空间

2 个答案: