Question

我想要这两个div标签，因此它们彼此重叠。我已经将它们都定义为内联块，因为我需要为它们提供像float，padding，border这样的属性。即使将div标签定义为内联块之后，它们也部分位于同一条线上。帮助赞赏：）！

 <div id="legend" style="border:1px solid black; max-width:75%; float:right; display:inline-block;">
     <table style="padding: 2px;">
        <tr>
            <td><span  style="color:red; font-weight: bold;">*</span></td>
            <td>some text goes here.</td>
        </tr>
        <tr>
            <td><span  style="color:red; font-weight: bold;">**</span></td>
            <td>Some text goes here again</td>
        </tr>
        <tr>
            <td><span  style="color:red; font-weight: bold;">**</span></td>
            <td>yup..some other text goes here again.dfdsfdsfsf</td>
        </tr>
    </table>
</div>
<br/>
<br/>
<div id="backToSearch"style = "display:inline-block;">
    <button id="btnBackToSearch" class="k-button k-button-icontext"><span class="k-icon k-i-arrowhead-w"></span> Back To <span data-bind="text: backButtonText"></span></button>
</div>

Answer 1

display:inline-block;将设置为 。

将它们设置为display:block;，它们应该在彼此之上

编辑：正如@Khanh TO所说;默认情况下，Div为display:block;，因此您无需编写。

Answer 2

尝试：

<div id="legend" style="border:1px solid black; max-width:75%; float:right;">
    <table style="padding: 2px;">
        <tr>
            <td><span style="color:red; font-weight: bold;">*</span>
            </td>
            <td>some text goes here.</td>
        </tr>
        <tr>
            <td><span style="color:red; font-weight: bold;">**</span>
            </td>
            <td>Some text goes here again</td>
        </tr>
        <tr>
            <td><span style="color:red; font-weight: bold;">**</span>
            </td>
            <td>yup..some other text goes here again.dfdsfdsfsf</td>
        </tr>
    </table>
</div>
<div style="clear:both"></div>
<div id="backToSearch">
    <button id="btnBackToSearch" class="k-button k-button-icontext"><span class="k-icon k-i-arrowhead-w"></span> Back To <span data-bind="text: backButtonText"></span>
    </button>
</div>

https://jsfiddle.net/cj1s9q0g/

<强>更改：

删除display:inline-block，因为div默认为阻止，阻止将在彼此之上。
添加clear:both的div以清除float:right

Answer 3

将它们设为显示：块; 明确：两者;

为什么这两个div不能阻止？

3 个答案: