0

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

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

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

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

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

我尝试切换到使用内联块显示并将它们排列起来，但是当窗口缩小时，右表会出现在下一行。

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

4

2 回答 2

0

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

如果是这种情况，那么用你想要<table>的固定值制作一个。width将其设置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>
于 2013-07-16T17:35:45.340 回答
0

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

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

就滚动条而言，只需添加

overflow:scroll

到你的CSS表。

于 2013-07-16T17:40:52.303 回答