html - 浮点数在div内不起作用

可能是我在做一些愚蠢的错误导致此问题，但我被卡住了。
我需要在父div中创建2个相邻的子div。但它们并没有保持一致，它们像一个接一个地降下来。我的代码如下：

<html>
<body>
<div style="margin-top:5px; margin-left:200px; margin-right:200px; border:2px solid #c5d9eb; background-color: grey">
<div style="margin-left:0px;margin-top=5px;border:2px solid black>
<ul>
<li>Physics</li>
<li>Chemistry</li>
<li>Biology</li>
</div>
<div style="margin-left:80px;margin-top=5px;border:2px solid black>
<ul>
<li>History</li>
<li>Civics</li>
<li>Geography</li>
</div>
</div>
</body>
</html

如果在float:left中使用child div，它将移出parent div。

最佳答案

只需添加display: table-cell即可使您的孩子div adjascent

运行下面的代码片段以查看结果

<html>
<body>
<div style="margin-top:5px; margin-left:200px; margin-right:200px; border:2px solid #c5d9eb; background-color: grey">
    <div style="margin-left:0px;margin-top=5px;border:2px solid; display: table-cell ">
        <ul>
            <li>Physics</li>
            <li>Chemistry</li>
            <li>Biology</li>
        </ul>
    </div>
    <div style="margin-left:80px;margin-top=5px;border:2px solid black; display: table-cell">
        <ul>
            <li>History</li>
            <li>Civics</li>
            <li>Geography</li>
        </ul>
    </div>
</div>
</body>
</html>

关于html - 浮点数在div内不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29204615/