需要在图像下对齐表格，并将另一个表格直接放在图像/表格列的右侧
Posted
技术标签:
【中文标题】需要在图像下对齐表格，并将另一个表格直接放在图像/表格列的右侧【英文标题】：Need to align table under image and place another table directly to the right of the image/table column 【发布时间】：2020-10-26 18:28:14 【问题描述】：我正在努力帮助我妈妈度过难关，制作一个她可以在办公室使用的网络表单，而且我是 100% 自学成才的，因此非常感谢任何帮助。基本上，我试图将一个完全左对齐的图像放在页面上，其正下方有一个表格，图像右侧有一个更大的表格，右侧有另一个表格。现在，我无法让第一个表格直接位于图像下方 - 它一直保持左对齐但在第二个表格下方（比第一个大得多）
这是我目前的代码：
<img src="logo" style="float:left; height: 80px; width: auto; cursor: pointer; padding: 5px;"><div>
<table style="float:right; background-color:#CCCCCC" border="1"><tbody><tr><td >#: <u>customerID</u><br>Sq Ft:<u><input type="text" style="width:50px"></u><br>Linear Ft:<u><input type="text" style="width:50px"></u><br><input type="checkbox">Live Infestation<br><input type="checkbox">Prevention<br><div style="padding-left:20px">Treatment</div><br><br><small><i></i></small><i></i><center><i><small>For Office Use Only</small></i></center></td></tr></tbody></table>
<table style="float:left; margin-left:100px" border="1"><tbody><tr><td style="text-align:center"><b>Termite Inspection Graph & Treatment Specifications</b></td></tr><tr><td style="line-height:1.4"><u>customerName</u><br><small>Name</small><br><u>customerAddress customerCity customerState customerZip</u><br><small>Address/Zip Code</small><br><u>customerPhone, customerEmail</u><br><small>Phone, Email</small><br><u>billingAddress billingCity billingState billingZip</u><br><small>Bill To Address</small><br><u><input type="text"></u><br><small>Agreement/Treatment is limited to the one structure listed above unless specified here</small></td></tr></tbody></table><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><table style="float:left; background-color:#D0F0C0" border="1"><tbody><tr><td><small><input type="checkbox"> Sentricon + Termidor <br><input type="checkbox"> Sentricon + Altriset<br><input type="checkbox"> Termidor Only<br><input type="checkbox"> Altriset Only<br><input type="checkbox"> Sentricon Only</small></td></tr></tbody></table></div>
作为参考，这是我遇到问题的最后一段代码。旁注，她使用的软件不允许我编辑 CSS，所以我所做的一切都需要在 html 代码中。
感谢所有帮助！
【问题讨论】：
【参考方案1】：如果您能够在 HTML 页面的标签中使用 css，这应该适合您： CSS 的@media 部分是使列堆叠而不是在手机等窄屏幕上彼此相邻；确保对实际内容进行测试和调整，以查看其行为是否符合预期。
<html>
<head>
<style>
body /*display: inline-block;*/
#image width: 25%; margin: 15px;
#righttable float: left; width: 20%; margin: 10px;
#lefttable float: left; width: 20%; margin: 10px;
#midtable float: left; width: 50%; margin: 10px;
div.row width: 100%;
@media screen and (max-width: 600px)
#image width: 100%;
#righttable width: 100%;
#lefttable width: 100%;
#midtable width: 100%;
</style>
</head>
<body>
<div class="row">
<img id="image" src="logo" style="height: 80px; width: auto; cursor: pointer; padding: 5px;"></div>
<div class="row">
<div id="lefttable">
<table style="background-color:#D0F0C0" border="1"><tbody><tr><td><small><input type="checkbox"> Sentricon + Termidor <br><input type="checkbox"> Sentricon + Altriset<br><input type="checkbox"> Termidor Only<br><input type="checkbox"> Altriset Only<br><input type="checkbox"> Sentricon Only</small></td></tr></tbody></table></div>
<div id="midtable"><table style=" /*margin-left:100px*/" border="1"><tbody><tr><td style="text-align:center"><b>Termite Inspection Graph & Treatment Specifications</b></td></tr><tr><td style="line-height:1.4"><u>customerName</u><br><small>Name</small><br><u>customerAddress customerCity customerState customerZip</u><br><small>Address/Zip Code</small><br><u>customerPhone, customerEmail</u><br><small>Phone, Email</small><br><u>billingAddress billingCity billingState billingZip</u><br><small>Bill To Address</small><br><u><input type="text"></u><br><small>Agreement/Treatment is limited to the one structure listed above unless specified here</small></td></tr></tbody></table><br></div>
</div>
<div id="righttable">
<table style=" background-color:#CCCCCC" border="1"><tbody><tr><td >#: <u>customerID</u><br>Sq Ft:<u><input type="text" style="width:50px"></u><br>Linear Ft:<u><input type="text" style="width:50px"></u><br><input type="checkbox">Live Infestation<br><input type="checkbox">Prevention<br><div style="padding-left:20px">Treatment</div><br><br><small><i></i></small><i></i><center><i><small>For Office Use Only</small></i></center></td></tr></tbody></table></div>
</body>
</html>
【讨论】：
很遗憾，我也无法编辑样式。还有其他方法吗？ 如果您可以创建 DIV 元素并将样式放入其中，则应该使用相同的方法。像这样：<div class="row" style="width: 100%"> 和 <div id="lefttable" style= "float: left; width: 20%; margin: 10px;"> 和 <div id="midtable" style = "float: left; width: 50%; margin: 10px;"> 和 <div id="righttable" style = "float: left; width: 20%; margin: 10px;"> - 如果你必须在表格上使用样式标签，那么边距和填充会有点繁琐，但你可能或多或少会得到它如果需要，您希望它如何不使用 DIV 元素。
我可能做错了，但我也无法让它工作。这些片段应该放在代码的什么位置？是在表格代码开始之前吗？
每个 div 会在创建每个表之前执行，然后记得使用 </div> 标记关闭标记，该标记将位于相应的 </table> 标记之后。
嗯，它仍然不会将最左边的表格放在页面的最边缘并将其放在徽标的右侧。不过，感谢您的所有帮助！我是完全自学的，所以我学到的任何其他东西总是有帮助的。我会继续努力的。【参考方案2】：
更新：这是通过欺骗系统并将顶部图像作为需要直接位于其下方的表格的第一行来实现的
【讨论】：
以上是关于需要在图像下对齐表格，并将另一个表格直接放在图像/表格列的右侧的主要内容，如果未能解决你的问题，请参考以下文章