我正在创建一个网页,其图形显示需要固定数量的像素宽才能正常运行。我希望它居中,并使用它左右两侧的区域来显示它的相关信息(表格)。
如果我可以这样做,我会:
<div style="width: 50%-360px; float: left">
<table>
...
</table>
</div>
<div style="width: 50%-360px; float: right">
<table>
...
</table>
</div>
<div style="width: 720px">
(以及任何强制他们在一条线上的调整)。
当然这在语法上是错误的,但它应该给出我想要的想法。但是现在,缩小窗口会强制显示在桌子下面,这不是我想要的。
我尝试切换到使用内联块显示并将它们排成一行,但当窗口缩小时,右边的表格会在下一行结束。
有没有什么方法可以让这种风格很好地重新调整大小,并允许我在桌子上放置滚动条,当它们变得太小而不是水平滚动整个页面时?
答案 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表。