浮动在内部不起作用 div

Question

可能是我犯了一些愚蠢的错误导致了这个问题，但我被卡住了。我需要在父 div 中创建 2 个相邻的子 div。但他们并没有 aligned.They 一个接一个地来。我的代码如下：

<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

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

Answer 1

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

Run code snippet below to see the result

<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>

Answer 2

创建 child 个元素 display: inline-block。

CSS

#parent{
    margin-top:5px; 
    border:2px solid #c5d9eb; 
    background-color: grey
}
#child{
    margin-left:0px;
    margin-top:5px;
    border:2px solid black;
    display:inline-block;
}

制作parentdivid="parent"

和两者 child div id="child"

Answer 3

在此处检查更新后的代码。

<div style="margin-top: 5px; margin-right: 200px; border: 2px solid rgb(197, 217, 235); background-color: grey; margin-left: 200px;">
    <div style="margin-left: 0px; border: 2px solid black; float: left; width: 49%;">
        <ul>
            <li>Physics</li>
            <li>Chemistry</li>
            <li>Biology</li>
        </ul>
    </div>
    <div style="border: 2px solid black; float: left; width: 49%;">
        <ul>
            <li>History</li>
            <li>Civics</li>
            <li>Geography</li>
        </ul>
    </div>
</div>

您忘记在 div 样式末尾添加 "。
之后为 div 和 float:left 提供宽度，这将提供您想要的输出。

浮动在内部不起作用 div

Float not working inside div

html

css

css-float

styling

CSS