Question

我有以下DIV并排。我想隐藏右侧DIV并默认将左侧DIV对齐。单击左侧DIV链接可显示右侧DIV。它似乎工作，但我将代码移动到另一台机器。单击链接时，左侧DIV不会向左移动。所以有重叠。我在两台机器上都使用IE 8。你能告诉我可能出错的地方吗？我很感激任何建议。

#div_main {
    text-align: center;
}

#div_left {
    display: inline-block;
    width: 50%;
    text-align: left; 
}

#div_right {
    width: 50%;
    float: right;
}

    <div id="div_main">
        <div id="div_right">
            <asp:Panel ID="pnlGraph" runat="server" Style="display: none">
             </asp:panel>
        </div>
        <div id="div_left" >
        </div>
     </div>

Answer 1

在顶部添加此CSS代码 -

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
}

原因 -

我认为百分比的使用导致了这个问题。其中一个div具有边距设置（某些浏览器为页面上的各种元素指定默认边距/填充），这可能会影响布局。

Answer 2

我将display: none添加到CSS中。剩下的只是一个jQuery解决方案，用float: left移动第一个并显示正确的

#div_right {
    display: none;
}

$('#div_left').on('click', function() {
    $(this).css('float', 'left');
    $('#div_right').show();
});

请参阅JSFiddle

并排问题

2 个答案: