html布局——水平滚动答案

【问题标题】：html layout -- horizontal scrollinghtml布局——水平滚动
【发布时间】：2014-03-14 07:43:16
【问题描述】：

我创建了一个我需要的布局。在此布局中，我希望带有图像的第一行滚动。我无法在单个表中添加此属性。

所以我创建了两张表，上面一张只有一行可以滚动。底部表格将包含不会滚动的两行。

两个问题：--
1> 我已将滚动属性添加到上表的 div 中，但它同时显示在两个表中。我只想滚动顶部表格。
2> GUI也只覆盖了网页的一半（如何使它覆盖网页的整个高度）。

请就此提出建议。

<!DOCTYPE html>
<html>

<style>

div.scrollable {
    width: 100%;
    height: 0%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

</style>

<body>


<div class=scrollable>
<table >
  <tr>

    <td colspan="2" style="background-color:#CC99FF; white-space:nowrap;">

    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />


<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

    </td>
  </tr>
</div>


</table>





<div>

<table width="100%"  border="0">

  <tr valign="top">
    <td style="background-color:#FFCCFF;
                  width:100px;text-align:top;">
      <b>Main Menu</b><br />
      BUTTON-1<br />
      BUTTON-2<br />
      BUTTON-3
    </td>

    <td style="background-color:#eeeeee;height:200px;
                  width:300px;text-align:top;">
        Table center
    </td>

  </tr>
  <tr>
    <td colspan="2" style="background-color:#CC99FF;">
        <center>
      Copyright © 2014 My First Layout
        </center>
    </td>
  </tr>
</table>

</div>

</body>
</html>

【问题讨论】：

您为此使用表格的任何原因？
那么用什么..？我参考了本教程.. w3schools.com/html/html_layout.asp
在那个网站上它甚至说Using <table> to create a nice layout is NOT the correct use of the element. The purpose of the <table> element is to display tabular data!。我建议使用div 等...

标签： html css

【解决方案1】：

管理您的 Html div 结构：

input[type="image"]{
    float:left;
}

【讨论】：

在我的 Div 结构中添加这个有什么好处.. id 没有看到任何区别。

【解决方案2】：

对于初学者来说，你有一个错误的 div 和 table 嵌套：

<div class=scrollable>
<table >
...
</div>
</table>

其次，表格中的 div 没有任何意义。把它放在你的内部 td 单元格中：

<table>
<tr><td>
<div>
...
</div>
</td>
</tr>
</table>

第三，您在第一个表的 td 中有一个 colspan 属性，但表中只有一个单元格。这应该被删除。

最后，这不起作用的主要原因是因为您有一个 div 的大小为容器单元格的 100%，它没有最大宽度，所以一切都会相应地扩展，因为没有满足条件来阻止它.

解决办法是：使用带有固定值的max-width 用于带有图像的单元格：

<td style="max-width:1024px; background-color:#CC99FF; white-space:nowrap;">

【讨论】：

第一个答案有效......你的第二个选项永远不会工作..我以前尝试过。
Div 不在单元格中但在表格中的其他位置几乎总是会破坏您的布局。查看这篇文章：css-tricks.com/using-divs-inside-tables
不，我在它不起作用之前尝试过这个......你能在......上显示......jsfiddle.net
@Katoch 第一种方式是错误的，不要不要这样使用。这不是其中之一“哦，它似乎有效，所以一切都很好”，不。它无效，只会导致问题。