不能在css中移动我的背景

时间：2016-10-27 03:59:57

标签： html css twitter-bootstrap

我是堆栈溢出的新手，希望我能在这里学到很多东西：）

所以我试图制作一个简单的首页但突然间我不能再移动我的背景了。尝试填充但我无法解决它。也许是因为我刚开始使用代码，哈哈！所以我想做的事情如下：我想移动我的容器＆gt; 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 :(得分：1)

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

答案 1 :(得分：0)

设置容器宽度，然后左右边距：auto; 

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

}

答案 2 :(得分：0)

在css中添加容器float：left，或者可以添加clear 

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>

相关问题
最新问题