我开发了一个脚本来呈现活跃的 YouTube 聊天以及聊天中的人员摘要。这个想法是聊天项目表将出现在聊天成员列表的右侧。然而,在最新版本的 Safari 和 Chrome 中,浮动似乎不起作用,并且表格呈现一个在另一个之上。以下是生成的 HTML 的示例摘录,该 HTML 存在问题。
body {
background-image: '/bg-standard.jpg';
background-attachment: fixed;
}
.twoTables {
margin-left: -5px;
margin-right: -5px;
}
.tableLeft {
float: left;
width: 50%;
padding: 5px;
}
.tableRight {
float: left;
width: 50%;
padding: 5px;
}
.twoTables::after {
content: "";
clear: both;
display: table;
}
headingLink {
color: white;
text-decoration: none;
}
.dummyRow {
line-height: 1px;
visibility: hidden;
}
.freeze-table {
border-spacing: 0;
border-collapse: collapse;
padding: 0;
}
thead th {
top: 0;
position: sticky;
background-color: #666;
color: #fff;
z-index: 20;
min-height: 30px;
height: 30px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
xth,
xtd {
padding: 0 5px;
border-collapse: collapse;
font-size: 100%;
outline: 1px solid #ccc;
border: none;
outline-offset: -1px;
padding-left: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
th,
td {
padding: 0 0px;
border-collapse: collapse;
font-size: 100%;
border: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 5px;
}
tr {
min-height: 25px;
height: 25px;
background-color: #ffffff
}
pageElement {
display: flex;
flex-wrap: nowrap;
align-items: center
}
a:link {
color: white;
text-decoration: none;
}
* {
padding: 0;
margin: 0;
}
.fit {
/* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
.imgbox {
display: grid;
width: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
@media screen and (max-width: 600px) {
.tableLeft {
width: 100%;
}
.tableRight {
width: 100%;
}
}
<form method='POST' action=/ YouTube/latestChats.php>
<table style='border-collapse:collapse;'>
<tr>
<td><input type='checkbox' name='highlightMsg' id='highlightMsg' checked>
<label for='highlightMsg'>Highlight messages</label></td>
<td><input type='checkbox' name='msgUseRegEx' id='msgUseRegEx'>
<label for='msgUseRegEx'>Use REGEX</label></td>
<td>Message filter</td>
<td><input type='text' name='msg' value='request' size=30></td>
</tr>
<tr>
<td><input type='checkbox' name='invertOrder' id='invertOrder' checked>
<label for='invertOrder'>Latest first</label></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<input type='radio' name='emoteMgmt' value='text'> Emoticons as text
<input type='radio' name='emoteMgmt' checked value='icon'> Emoticons as image
<input type='radio' name='emoteMgmt' value='strip'> Strip emoticons
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<input type='submit' name='submit' value='Submit'>
<input type='submit' name='backToYouTubeStuff' value='Go Back'>
<br>
</form>
<br>
<div class='twoTables'>
<div id='watchers' class='tableLeft'>
<table>
<tr>
<th>Watcher</th>
<th>*</th>
<th>Joined</th>
<th>Latest</th>
</tr>
<tr>
<td>request</td>
<td>*</td>
<td>07:47</td>
<td>1805.0m</td>
</tr>
<tr>
<td>Joe Something - guru</td>
<td>*</td>
<td>07:44</td>
<td>1805.2m</td>
</tr>
<tr>
<td>(<span style="font-weight:bold; font-style:italic;">Tony</span>) Tropic</td>
<td>*</td>
<td>06:48</td>
<td>1839.9m</td>
</tr>
</table>
</div>
<div id='chats' class='tableRight'>
<table style='border-collapse:collapse;border:0px solid white;'>
<tr style='color:white; border:0px;'>
<td colspan=3 style='text-align:center;background-color:darkblue;color:white;font-size:115%;font-weight:bold;border:solid white;'>2023-08-27</td>
<td colspan=2 style='background-color:darkblue;color:white;font-size:115%;font-weight:bold;border:solid white;'><a href='https://youtu.be/ForShow'>2023-08-27 Livestream Title (23-074)</a></td>
</tr>
<tr>
<td style='text-align:right;color:Blue;'>1</td>
<td style='text-align:center;color:Blue;'>07:47</td>
<td style='text-align:right;color:Blue;'>(58:51)</td>
<td style='text-align:left;color:Blue;'>Tropic</td>
<td style='text-align:left;color:Blue;'>
<a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3531' target='_blank'>_
Ty dad</a></td>
</tr>
<tr>
<td style='text-align:right;color:Blue;'>2</td>
<td style='text-align:center;color:Blue;'>07:47</td>
<td style='text-align:right;color:Blue;'>(58:41)</td>
<td style='text-align:left;color:Blue;'>Joe Something</td>
<td style='text-align:left;color:Blue;'>
<a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3521' target='_blank'>_
c ya guys</a></td>
</tr>
<tr>
<td style='text-align:right;color:Blue;'>3</td>
<td style='text-align:center;color:Blue;'>07:47</td>
<td style='text-align:right;color:Blue;'>(58:37)</td>
<td style='text-align:left;color:Blue;'>request</td>
<td style='text-align:left;color:Blue;'>
<a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3517' target='_blank'>_
Sold it Brad</a></td>
</tr>
<tr>
<td style='text-align:right;color:Blue;'>5</td>
<td style='text-align:center;color:Blue;'>07:46</td>
<td style='text-align:right;color:Blue;'>(58:28)</td>
<td style='text-align:left;color:Blue;'>Silent Chatter</td>
<td style='text-align:left;color:Blue;'>
<a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3508' target='_blank'>_
HAPPY Bday Son</a></td>
</tr>
<tr>
<td style='text-align:right;color:Blue;'>6</td>
<td style='text-align:center;color:Blue;'>07:46</td>
<td style='text-align:right;color:Blue;'>(58:27)</td>
<td style='text-align:left;color:Blue;'>request</td>
<td style='text-align:left;color:Blue;'>
<a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3507' target='_blank'>_
good job george</a></td>
</tr>
<tr>
<td style='text-align:right;color:Blue;'>7</td>
<td style='text-align:center;color:Blue;'>07:46</td>
<td style='text-align:right;color:Blue;'>(58:23)</td>
<td style='text-align:left;color:Blue;'>Danny Incognito</td>
<td style='text-align:left;color:Blue;'>
<a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3503' target='_blank'>_
bye bye guys</a></td>
</tr>
<tr>
<th colspan=5 style='background-color: #666 ;color: #fff ;z-index: 20 ;min-height: 30px ;height: 30px ;text-align: left ;'>End of data. </th>
</tr>
</table>
</div>
</div>
我已经搜索了类似问题的解决方案,但似乎没有一个与我的问题完全匹配,保存这个。对于这个,我对接受的答案有两个问题(“你需要将文本包装在 div 内并将其向左浮动,而包装 div 应该有高度......):(1)我的代码已经被包装并指定浮动; (2)我还没有看到证据表明我必须指定高度。我认为这是问题的另一种变体。然后是令人讨厌的评论,认为所接受的答案不起作用。
关于使浮动工作,我在这里做了明显错误的事情吗?我什么也没看到。
注意:这里定义了很多样式属性但未使用。实际成品的功能远不止这副桌子那么简单。
感谢您的任何见解。
删除表格容器上的 50% 宽度,或将框大小设置为 border-box。表格将按原样浮动,但通过按原样设置宽度,它们会太宽并且会换行。
实施例1
实施例2