如果你看看我的小提琴，我试图将图像表对齐到选项卡式内容的右侧。我似乎无法找到合适的位置。我对编码非常新，所以我确信编码很乱，但我正在努力学习。如果您查看此链接：http://www.realtimehockey.net/education.html我想要图像表和选项卡式内容的方向来镜像此设置。任何帮助将不胜感激，因为我知道这可能是一个相当容易的修复，但我似乎无法弄明白。提前谢谢。
我的小提琴：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个字符，所以你可以在小提琴中找到HTML代码
答案 0 :(得分：1)
html中缺少一些起始div - 它都以ul开头但是在ul关闭后有3个div结束，所以我们看不到那些div。同样在<div class="w-col w-col-4"><div class="w-embed">中 - 这些div也缺少表格之后的结束标记。所以有一些我们看不到的东西。除了指向方向之外，您可以向左浮动选项卡表，向右浮动图像表，然后清除浮动，或使用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都有一个设置宽度，你应该很好。