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

时间:2013-07-16 17:29:01

标签: html css layout css-float spacing

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

如果我可以这样做,我会:

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

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

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

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

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

2 个答案:

答案 0 :(得分:0)

如果我理解正确,你在两个<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>

答案 1 :(得分:0)

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

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

就滚动条添加

overflow:scroll

给你的css表。