如果您看一下我的 Fiddle，我会尝试让图像表格与选项卡式内容的右侧对齐。我似乎无法进入正确的位置。我对编码很陌生，所以我确定编码很乱，但是我正在努力学习。如果您查看此链接:http://www.realtimehockey.net/education.html我想要图像表和选项卡式内容的方向来反射(reflect)此设置。任何帮助将不胜感激，因为我知道这可能是一个相当简单的修复，但我似乎无法弄清楚。提前致谢。
我的 fiddle :https://jsfiddle.net/7tg90tzf/
CSS
.tabs input[type=radio] {
display:none;
}
.tabs {
width: 800px;
height: 800px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 5px;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
color: #FFFFFF;
font-family: patua one;
font-style: italic;
font-size: 14px;
font-weight: bold;
background: linear-gradient(#080808, #454545);
cursor: pointer;
position: relative;
}
.tabs label:hover {
background: #ff6600;
}
.tab-content {
z-index: 2;
display: none;
left: 0;
width: 725px;
height: 773px;
font-size: 20px;
line-height: 140%;
padding: 10px;
position: absolute;
box-sizing: border-box;
border:1px solid #454545;
border-top: 7px solid #454545;
background-color:#ffffff;
}
[id^=tab]:checked + label {
background: #ff6600;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
</style>
<style id="OrgsAtoD_19563_Styles">
<!--table
{mso-displayed-decimal-separator:"\.";
mso-displayed-thousand-separator:"\,";}
.xl1519563
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:11.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Calibri, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:general;
vertical-align:bottom;
mso-background-source:auto;
mso-pattern:auto;
white-space:nowrap;}
.xl6519563
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:#0563C1;
font-size:11.0pt;
font-weight:400;
font-style:normal;
text-decoration:underline;
text-underline-style:single;
font-family:Calibri, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:general;
vertical-align:bottom;
background:#D8D8D8;
mso-pattern:black none;
white-space:nowrap;}
.xl6619563
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:12.0pt;
font-weight:700;
font-style:normal;
text-decoration:none;
font-family:Candara;
mso-generic-font-family:auto;
mso-font-charset:0;
mso-number-format:General;
text-align:general;
vertical-align:bottom;
background:#D8D8D8;
mso-pattern:black none;
white-space:nowrap;}
.xl6719563
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:#0563C1;
font-size:12.0pt;
font-weight:700;
font-style:normal;
text-decoration:underline;
text-underline-style:single;
font-family:Candara;
mso-generic-font-family:auto;
mso-font-charset:0;
mso-number-format:General;
text-align:general;
vertical-align:bottom;
background:#D8D8D8;
mso-pattern:black none;
white-space:nowrap;}
.xl6819563
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:#0563C1;
font-size:11.0pt;
font-weight:400;
font-style:normal;
text-decoration:underline;
text-underline-style:single;
font-family:Calibri, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:general;
vertical-align:bottom;
background:white;
mso-pattern:black none;
white-space:nowrap;}
.xl6919563
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:12.0pt;
font-weight:700;
font-style:normal;
text-decoration:none;
font-family:Candara;
mso-generic-font-family:auto;
mso-font-charset:0;
mso-number-format:General;
text-align:general;
vertical-align:bottom;
background:white;
mso-pattern:black none;
white-space:nowrap;}
.xl7019563
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:#0563C1;
font-size:11.0pt;
font-weight:700;
font-style:normal;
text-decoration:none;
font-family:Calibri, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:general;
vertical-align:bottom;
background:#D8D8D8;
mso-pattern:black none;
white-space:nowrap;}
.xl7119563
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:#0563C1;
font-size:11.0pt;
font-weight:700;
font-style:normal;
text-decoration:none;
font-family:Calibri, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:general;
vertical-align:bottom;
background:white;
mso-pattern:black none;
white-space:nowrap;}
.xl7219563
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:12.0pt;
font-weight:700;
font-style:normal;
text-decoration:none;
font-family:Candara, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:general;
vertical-align:bottom;
mso-background-source:auto;
mso-pattern:auto;
white-space:nowrap;}
.xl7319563
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:white;
font-size:11.0pt;
font-weight:700;
font-style:italic;
text-decoration:none;
font-family:"Patua One", monospace;
mso-font-charset:0;
mso-number-format:General;
text-align:general;
vertical-align:bottom;
background:#FF6600;
mso-pattern:black none;
white-space:nowrap;}
.xl7419563
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:#0563C1;
font-size:11.0pt;
font-weight:700;
font-style:normal;
text-decoration:none;
font-family:Calibri, sans-serif;
mso-font-charset:0;
mso-number-format:"\@";
text-align:general;
vertical-align:bottom;
background:#D8D8D8;
mso-pattern:black none;
white-space:nowrap;}
.xl7519563
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:#0563C1;
font-size:11.0pt;
font-weight:700;
font-style:normal;
text-decoration:none;
font-family:Calibri, sans-serif;
mso-font-charset:0;
mso-number-format:"\@";
text-align:general;
vertical-align:bottom;
background:white;
mso-pattern:black none;
white-space:nowrap;}
.xl7619563
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:#0563C1;
font-size:11.0pt;
font-weight:700;
font-style:normal;
text-decoration:none;
font-family:Calibri, sans-serif;
mso-font-charset:0;
mso-number-format:"\@";
text-align:general;
vertical-align:bottom;
background:#D9D9D9;
mso-pattern:black none;
white-space:nowrap;}
.xl7719563
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:#0563C1;
font-size:11.0pt;
font-weight:700;
font-style:normal;
text-decoration:none;
font-family:Calibri, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:general;
vertical-align:bottom;
background:#D9D9D9;
mso-pattern:black none;
white-space:nowrap;}
#table-wrapper {
position:relative;
}
#table-scroll {
height:700px;
width: auto;
overflow:auto;
margin-top:10px;
}
#table-wrapper table {
width:auto;
}
#table-wrapper table * {
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:auto;
}
我的字符数超过了分配的 30,000 个字符，因此您可以在 Fiddle 中找到 HTML 代码
最佳答案
html 中缺少一些起始 div - 全部以 ul 开头，但在 ul 关闭后有 3 个 div 结束，因此我们看不到那些 div。同样在 <div class="w-col w-col-4"><div class="w-embed"> - 这些 div 也缺少表格后的结束标记。所以那里有一些我们看不到的东西。除了为您指明方向之外，您可以将选项卡表向左浮动，将图像表向右浮动，然后清除 float ，或使用 display:inline-block。所以像这样:
.tabs {
width: 800px;
height: 800px;
float: left;
list-style: outside none none;
position: relative;
padding: 0px;
margin: 5px;
}
.w-col {
float:right;
width: 200px;
}
然后在 .w-col 之后div，添加 <div style="clear:both"></div>
只要包装所有代码的 div 具有设置的宽度，您就可以了。
关于jquery - 选项卡式内容/表格方向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29223633/