Question

好的，所以我试图创建这个div，显示用户输入的Civilian和Vehicle的信息。我为它创建了HTML和CSS，它一切正常，直到我添加2 div混合。使用一个div，它看起来像 this，{2} this，看起来像this。 IDK这里发生了什么，真的。当我为所有东西添加背景时，没有白色背景，其中巨大的差距来自＆＃34;信息：＆＃34;和平民：＆＃34;。为此，当我将div的{{1}}放入width并将显示设置为div时，它会显示为All about Missing dSYMs。 IDK如何解释它，它只是在屏幕上被遗忘。我很抱歉，如果这是修复我的HTML / CSS内部的基本内容，我对其中任何一个都知之甚少，我只是试图使用jQuery来处理其中的一些东西（基本上编辑）文本）。这是我的HTML / CSS代码：

HTML：

%49.99

CSS：

inline-block

Answer 1

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

p {
    font-family: verdana;
    font-size: 20px;
}
.content-wrapper{
display:flex;
}
.content-wrapper > div{
width:50%;
}
.content-wrapper > div > span{
display:flex;
}
h1{
display:block;
}
</style>
</head>
<body>
 <div id="civinfo">
        <h1>Information</h1>

        <div class="content-wrapper">
        <!-- CIV SIDE -->
        <div>
            <h2>Civilian: </h2>
            <span><h3>Name: </h3><p id="civname">None, None</p></span>
            <span><h3>Warrant: </h3><p id="civwarrant">None</p></span>
            <span><h3>Citations: </h3><p id="civcit">None</p></span>
        </div>
        <!-- VEH SIDE -->
        <div>
            <h2>Vehicle: </h2>
            <span><h3>Plate: </h3><p id="vehplate">None</p></span>
            <span><h3>Stolen: </h3><p id="vehstolen">None</p></span>
            <span><h3>Registered: </h3><p id="vehregi">None</p></span>
            <span><h3>Insured: </h3><p id="vehinsured">None</p></span>
        </div>
    </div>
</div>
</body>
</html>

你只需将民用和vechicle div包装成一个div并将其显示为flex。尝试上面的代码。进行一些css修改。

在屏幕上的东西奇怪的展示

1 个答案: