logo标签列表

为什么我不能移动背景？

htmlcsstwitter-bootstrap
3

我正在尝试制作一个简单的首页，但突然间我的背景不能移动了。我已经尝试使用padding，但是无法解决问题。也许是因为我刚开始接触代码，哈哈！所以我想要做的是：我想将我的容器 > background-color: rgba(98, 97, 99, 0.25); 移到更中心的位置，使两侧均匀。由于某种原因，该代码在此处显示不正确，但对我来说是正确的。也许是因为我正在使用Bootstrap。

body html {
    margin: 0;
    padding: 0;
}

.container {
    background-color: rgba(98, 97, 99, 0.25);
    padding-top: 4%;

}


.wrap{
    width: 1090px;

}
video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
}

.wowImg {
    height: 255px;
    width: 255px;
    border-top: solid black 9px;
    border-bottom: solid black 9px;
    border-left: solid black 9px;
    float: left;
}

.venom {
    height: 255px;
    width: 255px;
    border-bottom: solid black 9px;
    border-left: solid black 9px;
    float: left;
}

.overwatch {
    height: 255px;
    width: 255px;
    border-top: solid black 9px;
    border-bottom: solid black 9px;
    border-right: solid black 9px;
    border-left: solid black 9px;
    float: left;
}

.sum41 {
    height: 255px;
    width: 255px;
    border-bottom: solid black 9px;
    border-right: solid black 9px;
    border-left: solid black 9px;
    float: left;
}

.middle {
    height: 510px;
    width: 550px;
    border-top: solid black 9px;
    border-bottom: solid black 9px;
    border-left: solid black 9px;
    float: left;
}

.whileSheSleeps {
    height: auto;
    width: 540px;
    border-bottom: solid black 9px;
    border-left: solid black 9px;
    border-right: solid black 9px;
    float: left;
}

.monster {
    height: 284px;
    width: 250px;
    border-bottom: solid black 9px;
    border-left: solid black 9px;
    border-right: solid black 9px;
    float: left;
}

.css_awesome {
    height: 284px;
    width: 285px;
    border-bottom: solid black 9px;
    border-left: solid black 9px;
    border-right: solid black 9px;
    float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>homepage</title>
    <link href="index.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <div class="row col-md-12 wrap">
        <div class="row">
            <div class="col-md-12">
                <div class="wrap">


                    <div class="row col-md-3 upperLeft">
                        <div class="row">
                            <div class="col-md-12">
                                <img class="wowImg"img">
                                <img class="venom" src="img">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6  Middle">
                        <div class="row">
                            <div class="col-md-12">
                                <img class="middle" src "img">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-3 upperRight">
                        <div class="row">
                            <div class="col-md-12">
                                <img class="overwatch" src="img">
                                <img class="sum41" src="img">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-6 bottomLeft">
                        <div class="row">
                            <div class="col-md-12">
                                <img class="whileSheSleeps" src="img">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-3 bottomMid">
                        <div class="row">
                            <div class="col-md-12">
                                <img class="monster" src="img">
                            </div>
                        </div>
                    </div>
                    <div class="row col-md-3 bottomRight">
                        <div class="row">
                            <div class="col-md-12">
                                <img class="css_awesome" src="img">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

3个回答
0
在CSS中添加容器的float:left，或者您可以添加clear:both。 

body html {
    margin: 0;
    padding: 0;
}

.container {
    background-color: rgba(98, 97, 99, 0.25);
    padding-top: 4%;
    float:left;
}


.wrap{
    width: 1090px;

}
video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
}

.wowImg {
    height: 255px;
    width: 255px;
    border-top: solid black 9px;
    border-bottom: solid black 9px;
    border-left: solid black 9px;
    float: left;
}

.venom {
    height: 255px;
    width: 255px;
    border-bottom: solid black 9px;
    border-left: solid black 9px;
    float: left;
}

.overwatch {
    height: 255px;
    width: 255px;
    border-top: solid black 9px;
    border-bottom: solid black 9px;
    border-right: solid black 9px;
    border-left: solid black 9px;
    float: left;
}

.sum41 {
    height: 255px;
    width: 255px;
    border-bottom: solid black 9px;
    border-right: solid black 9px;
    border-left: solid black 9px;
    float: left;
}

.middle {
    height: 510px;
    width: 550px;
    border-top: solid black 9px;
    border-bottom: solid black 9px;
    border-left: solid black 9px;
    float: left;
}

.whileSheSleeps {
    height: auto;
    width: 540px;
    border-bottom: solid black 9px;
    border-left: solid black 9px;
    border-right: solid black 9px;
    float: left;
}

.monster {
    height: 284px;
    width: 250px;
    border-bottom: solid black 9px;
    border-left: solid black 9px;
    border-right: solid black 9px;
    float: left;
}

.css_awesome {
    height: 284px;
    width: 285px;
    border-bottom: solid black 9px;
    border-left: solid black 9px;
    border-right: solid black 9px;
    float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>homepage</title>
    <link href="index.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <div class="row col-md-12 wrap">
        <div class="row">
            <div class="col-md-12">
                <div class="wrap">


                    <div class="row col-md-3 upperLeft">
                        <div class="row">
                            <div class="col-md-12">
                                <img class="wowImg"img">
                                <img class="venom" src="img">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6  Middle">
                        <div class="row">
                            <div class="col-md-12">
                                <img class="middle" src "img">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-3 upperRight">
                        <div class="row">
                            <div class="col-md-12">
                                <img class="overwatch" src="img">
                                <img class="sum41" src="img">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-6 bottomLeft">
                        <div class="row">
                            <div class="col-md-12">
                                <img class="whileSheSleeps" src="img">
                            </div>
                        </div>
                    </div>

                    <div class="row col-md-3 bottomMid">
                        <div class="row">
                            <div class="col-md-12">
                                <img class="monster" src="img">
                            </div>
                        </div>
                    </div>
                    <div class="row col-md-3 bottomRight">
                        <div class="row">
                            <div class="col-md-12">
                                <img class="css_awesome" src="img">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

0

设置容器宽度，然后左右边距为自动：

.container {
  background-color: rgba(98, 97, 99, 0.25);
  padding-top: 4%;
  width: 900px;
  margin-left: auto;
  margin-right: auto;

}
0
.container {
    background-color: rgba(98, 97, 99, 0.25);
    padding-top: 4%;
    width: 960px;
    margin: 0 auto;
}
如果我的屏幕不支持960像素的宽度怎么办？ - Mike
请使用相对单位如 em 或 %，或者使用媒体查询来调整宽度以适应多个屏幕尺寸。 - Syed Arif Iqbal
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接