一个 html 元素被另一个重叠。如何解决？答案

【问题标题】：One html element get overlapped by another. How to fix it?一个 html 元素被另一个重叠。如何解决？
【发布时间】：2018-06-18 18:45:49
【问题描述】：

为什么我的 html 元素会被另一个元素重叠？在中、大屏幕上它可以正常显示，但在小屏幕上它会重叠。

我正在使用引导程序。

请看截图。这里我给出三个截图。第一个看起来OK。蓝色背景是父 div (<section id="prime-content">)，其余的是子 div。

我需要帮助来解决这个问题。我是新手。我正在学习在这个平台上提问。我应该给html代码吗？

CSS：

#prime-content{
    background-color: blue;
    height: 750px;
}
.pc-header{
    background-color: #FFFF00;
    width: 100%;
    padding: 30px;
    text-align: center;
    margin-bottom: 10px;
}
.pc-header h2{
    color:#000;
    float: center;
    z-index: 3;
}
.p-content{
    background-color:#fff;
}

截图：

【问题讨论】：

分享您的 HTML 代码
好的。我在我的问题正文中添加了我的 html 代码。
在 plnkr 中分享您的代码，以便我们找出问题所在。
用html上传css
您需要提供minimal reproducible example

标签： html bootstrap-4

【解决方案1】：

尝试按照我的方式更改这段代码：

<div class="col-2 col-xs-12 col-sm-12 col-md-6">
      <div class="pc-header">
        <h2>Posts</h2>
      </div>

【讨论】：

【解决方案2】：

enter image description here

<!-- begin snippet: js hide: false console: true babel: true -->
#prime-content {
            background-color: blue;
            margin-top: 15px;
        }

        #prime-content .sidebar-left {
            color: white;
        }

        #prime-content .sidebar-right {
            color: white;
        }

        .pc-header {
            background-color: #FFFF00;
            width: 100%;
            padding: 30px;
            text-align: center;
            margin-bottom: 10px;
        }

        .p-content {
            background-color: #fff;
            padding: 15px;
        }

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body style="background-color:cornflowerblue;">
    <div id="prime-content">
        <div class="container-fluid">
            <div class="row" style="margin-top:15px;">
                <div class="col-md-3 col-lg-3 col-sm-12">
                    <div class="sidebar-left text-center">
                        <h3>Degital Media Houses of Assam</h3>
                        <div class="mh-names">
                            <h4> Total no of members</h4>
                        </div>
                        <p class="mh-name"> Total no of members</p>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6" style="margin-bottom:15px">
                    <div class="pc-header">
                        <h2>Posts</h2>
                    </div>
                    <div class="p-content">
                        <div class="media border">
                            <img src="https://cdn1.iconfinder.com/data/icons/avatar-2-2/512/Salesman_1-512.png" alt="Admin" class="mr-3 mt-3 rounded-circle" style="width:60px;">
                            <div class="media-body">
                                <h4>Admin <small><i>, Posted on May 19, 2018</i></small></h4>
                                <p>
                                    The JOURNALIST ASSOCIATION OF INDIA (JAI) (Non-Profit Organization) is working and fighting to protect for freedom of expression, under the valuable guidance of H K Sethi since last more than 20 years. Journalist Association of India under the flagship
                                    of Journalists Federation of India is fighting cesslessly for the Journalists... c scrutiny...
                                </p>
                                <a href="#" class="btn btn-primary">Read More &rarr;</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-3">
                    <input type="text" class="form-control" placeholder="Search directory">
                    <div class="sidebar-right">
                        <h3 class="text-center">Members</h3>
                        <h4 class="text-center"> Total : </h4>
                        <input type="text" class="form-control" placeholder="Search member"><br />
                        <div class="form-group">
                            <label for="exampleFormControlSelect1">Example select</label>
                            <div class="sort-items">
                                <select id="sort" class="form-control">
                                    <option>By Names</option>
                                    <option>Newest first</option>
                                    <option>Oldest first</option>
                                    <option>By numbers</option>
                                </select>
                            </div><br />
                            <div class="m-names">
                                <h4>1. Durlav Gogoi </h4>
                                <div style="margin-left:20px;">
                                    <p>Media House : North-East Now</p>
                                    <p>Member since : June, 2018</p>
                                    <p>Contact : Not available</p>
                                    <p>Hailed from : Sivasagar</p>
                                </div>
                            </div>
                            <div class="m-names">
                                <h4>2. Rajen Sarmah </h4>
                                <div style="margin-left:20px;">
                                    <p>Media House : North-East Now</p>
                                    <p>Member since : June, 2018</p>
                                    <p>Contact : Not available</p>
                                    <p>Hailed from : Nalbari</p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

【讨论】：

我认为这不是媒体查询的问题，因为我使用它并且也正确使用了引导网格系统。
是的会看到，在我上面的代码sn-p中上传你的css。
这读起来更像是一场找不同的游戏。
@As Dictionary check above sn-p.
@Prashanth Olekar 您好，感谢您的大力帮助。现在工作正常。我已经看到我对使用 bootstrap 的网格系统的了解并不完美。你帮助我更好地理解。但还是有一个问题。我正在使用 bootstrap 4 代替您的版本。我注意到我的图像在您的情况下显示垂直方向而不是水平方向的剩余空白。此外，我们可以减少这个空白，以便文本可以占据它吗？