Question

我无法在图像右侧对齐表格。图像和表都位于超级表的单元格中。你能帮帮我吗？

<td class="menu-section" style="background: #F0F;"> <a href="#">
    <img class="menu-section-icon" onmouseover="document.getElementById('menu-section-desc-0').style.display = 'block';" onmouseout="document.getElementById('menu-section-desc-0').style.display = 'none';" onclick="document.getElementById('menu-section-sub-0').style.display = 'block';" src="/resources/images/server-icon-breakpoint-web-64.png">
    <div id="menu-section-desc-0" class="menu-section-desc" style="background-color: rgb(255, 0, 255); display: none;">
        <span class="menu-section-desc-content">
            Description stuff
        </span>
    </div>
</a>
    <div id="menu-section-sub-0" class="menu-section-sub">
        <table class="menu-table">
            ... table contents ...
        </table>
    </div>
</td>

Answer 1

尝试制作2个盒子。一个将包含图像，另一个将包含您想要对齐的其他两个表。然后将左侧和右侧浮动的两个方框对齐

Answer 2

为了好玩，我整理了一个可能对你有帮助的div结构。

FIDDLE

HTML

<div class='leftone'>
    <div class='littletop'></div>  
    <div class='holderdiv'>
        <div class='mediumdiv'></div>
        <div class='mediumdiv'></div>
        <div class='mediumdiv'></div>
          <div class='clearboth'></div>
        <div class='mediumdiv'></div>
        <div class='mediumdiv'></div>
    </div>
</div>

<div class='rightone'>
    <div class='littletop'></div>  
    <div class='holderdiv'>
        <div class='mediumdiv'></div>
        <div class='mediumdiv'></div>
        <div class='mediumdiv'></div>
          <div class='clearboth'></div>
        <div class='mediumdiv'></div>
        <div class='mediumdiv'></div>
    </div>
</div>

CSS就是小提琴。

Answer 3

我通过使用div而不是表来修复它。谢谢你的帮助。

CSS对齐表格

3 个答案: