时间戳

首页 > 解决方案 > 使项目居中而不扩大页面的整体大小

html - 使项目居中而不扩大页面的整体大小

问题描述

出于练习目的，我目前正在开发 100dayscss.com 克隆页面。我正在尝试以我自己的方式来做这件事，时不时地在源代码上达到顶峰。我有这个可爱的代码，它不能很好地与我合作。

我的主要问题是：我想将.box项目居中，但它只是一直“关闭”并扩大页面大小。我怎样才能让它工作，所以它就在它的中间，就在第一个容器的下面？

我想在页面两侧保持均匀的边距，并在两个框之间保持轻微的边距。

相对于页面大小，有没有一种方便的方法可以使这些项目居中？我也尝试将.container2's设置position为relative，但它与第一​​个 's 似乎并不相关.container，并且把一切都搞砸了。

它带来了另一个问题：

如何使页面水平静态？我们都知道在这个轴上操作有多不方便，我真的不想拥有那个水平滚动条。我应该避免哪些错误？

这是代码，也许有人可以帮助我。：） 谢谢！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
* {
    box-sizing: border-box;
}
body {
    background-color: whitesmoke;
    font-style: monospace;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
.container {
    position: absolute;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    
}

.item {
    padding: 2rem 1rem;
    font-size: 2rem;
    line-height: 1;
    text-align: center;  
    background: whitesmoke;
    color: #51aaa3;
    
}
    
.item-1 {
    flex-grow: 1.5;
    background-color: whitesmoke;
    z-index: 4
    }
.item-2 {
    flex-grow: 2;
    background-color: blue;
    z-index: 1
}
.bg {
    position: absolute;
    top: 50%;
    right: 40%;;
    height: 1200px;
    width: 700px;
    margin-top: -600px;
    background-color: whitesmoke;
    -webkit-box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
    box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
    border-radius: 50%;
    z-index: 2;
    box-shadow: none;
    
}

.container2 {
    top: 100%;
    left: 50%;
    margin: 24px 32px;
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    z-index: 20;
}

.box {
    background-color: orange;
    width: 400px;
    height: 400px;
    margin: 24px 32px;
}

</style>
</head>


<body>
    <div class="container">
        <div class="bg"></div> 
        <div class="item item-1"></div>
        <div class="item item-2"></div>
    </div>
    <div class="container2">
            <div class="box"></div>
            <iframe class="box" src="https://www.youtube.com/embed/fJ9rUzIMcZQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
    
    
</body>
</html>

标签： htmlcss

解决方案

尝试添加padding:center到.box项目并尝试使第一个容器漂浮起来

推荐阅读