Question

大家好，我有网页，我正在尝试制作响应式补充工具栏。.但没有成功：/

这是我的CSS文件

body {
    font-family: 'Fjalla One', sans-serif;
    background: url("https://i.imgur.com/CTT4cRp.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0px;
    z-index: -1;
    left: 0px;
    background-image: url('');
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.content-box {
    border-radius: 25px;
    border: 2px solid;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    max-width: 70rem;
    margin: 0 auto;
    margin-top: 20rem;
    background: white;
    padding-bottom: 50rem;
}

.news-box {
    background-color: lightgrey;
    width: 70%;
    float: left;
    padding: 15px;
    margin: 30px;
}

.news-title {padding-bottom: 5px;}

.sidebar {
    position: relative;
    width: 24%;
    float: right;
    bottom: 520px;
    margin: 30px;
}

.side {
    padding: 15px;
    background-color: lightgrey;
}

以下是html：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="IplexMC,Survur,Mainkraft,Minecraft Store,iplexmc,iplex,shadowhex iplex review">
    <meta name="author" content="Lubomir Stankov">

    <title> Shte se smenq ot admin panela </title>


    <!-- CSS -->
    <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">


</head>

<body>


<div id="particles-js"></div>


<div class="content-box">

    <div class="news-box">
        <h3 class="news-title">News</h3>

        <div class="card mt-1">
            <div class="card-body">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
                into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
                release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
                software like Aldus PageMaker including versions of Lorem Ipsum.

                Why do we use it?
                It is a long established fact that a reader will be distracted by the readable content of a page when
                looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
                of letters, as opposed to using 'Content here, content here', making it look like readable English. Many
                desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a
                search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
                evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


            </div>
        </div>


        <div class="card mt-1">
            <div class="card-body">
                This is some text within a card body.
            </div>
        </div>

    </div>

    <div class="sidebar">
        <div class="side mt-2">

            Sidebar

            <div class="card mt-2">
                <div class="card-body">
                    This is some text within a card body.
                </div>
            </div>

        </div>
        <div class="side mt-2">

            Sidebar

            <div class="card">
                <div class="card-body">
                    This is some text within a card body.
                </div>
            </div>

        </div>
    </div>

</div>




<script src="{{ asset('js/particles.min.js') }}"></script>
<script src="{{ asset('js/ptcls.js') }}"></script>
<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>

</html>

因此，当我调整页面大小时，侧边栏会进入新闻内容。.我尝试了许多方法，但再次失败了。.我不知道我做错了什么，希望您对我有帮助！感谢您的建议。

Answer 1

首先，如果您想让它具有响应性，我不建议您再使用浮点数；如果您想完全理解我读过的this，我就使用flexbox。

您需要为父div设置display: flex;，并为定位设置其他flex属性，而不是使用padding-bottom来使用margin-bottom

.content-box {
    border-radius: 25px;
    border: 2px solid;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    max-width: 70rem;
    margin: 0 auto;
    margin-top: 20rem;
    background: white;
    margin-bottom: 50rem; /*Changed*/
    display: flex; /*Added*/
    flex-direction: column; /*Added*/
    justify-content: center; /*Added*/
}

然后删除position: relative并浮动到侧边栏，然后更改宽度

.sidebar {
    width: 90%; /*Changed*/
    bottom: 520px;
    margin: 30px;
}

还更新新闻框，删除浮动内容并更改宽度

.news-box {
    background-color: lightgrey;
    width: 90%; /*Changed*/
    padding: 15px;
    margin: 30px;
}

对于移动设备来说可以，我们在这里使用mobile first，对于台式机，您需要将media query设置为

@media only screen and (min-width: 768px){
  .sidebar {
    width: 24%;
  }

  .news-box {
    width: 70%;
  }

  .content-box {
    flex-direction: row;
  }
}

那应该行得通，阅读信息，这样会更容易理解，这里有codepen，让我知道这是否对您有帮助！

如何制作响应式侧边栏

1 个答案: