CSS

Question

可能是我正在做一些愚蠢的错误导致这个问题，但我被困住了。我需要在父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。

Answer 1

只需添加display: table-cell即可让您的孩子成为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>

Answer 2

点击此处查看更新的代码。

<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提供宽度，给出你想要的输出。

Answer 3

制作子元素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;
}

制作父div id="parent"

以及子div id="child"

浮在div里面不工作

3 个答案:

CSS