Question

如何让文字准确地保留在我网站上的位置并将div均匀地包裹在其周围？

我无法弄清楚如何做到这一点。现在div占据页面的整个宽度，我想切掉它的一部分，使它看起来均匀。我想用“pageTwoblock”类操作div。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Daniel's Portfolio | Welcome</title>
    <link rel="stylesheet" href="CSS/bootstrap.min.css">
    <link rel="stylesheet" href="CSS/style.css">
    <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
    <div class="pageOne text-center">
        <ul class = "nav nav-pills">
            <li>
                <a href="#">Daniel Collins</a>
            </li>
            <li class="pull-right">
                <a href="#">Contact Me</a>
            </li>
            <li class="pull-right">
                <a href="#">Portfolio</a>
            </li>
            <li class="pull-right">
                <a href="#">About Me</a>
            </li>
        </ul>
        <div class="block text-center">
            <h1>Daniel's Portfolio Website</h1>
            <h2>Various Projects</h2>
        </div>
        <div class = "btnList text-center">
            <a class = "btn btn-default" href="#">Reddit</a>
            <a class = "btn btn-default" href="#">GitHub</a>
            <a class = "btn btn-default" href="#">Linkedin</a>
            <a class = "btn btn-default" href="#">Facebook</a>
        </div>
    </div>
    <div class= "pageTwo">
        <div class= "pageTwoblock">
            <div class="row">
                <div class ="col-md-6 text-center">
                    <h1>Daniel Collins</h1>
                    <p>
                        I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
                        different areas of web development from back end programming (PHP, C#, Java) to front end engineering
                        (HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
                    </p>
                </div>
            </div>
            <div class ="col-md-6">
            </div>
        </div>
    </div>
</body>
</html>

CSS：

body{
    background-color: white;
    font-family:Orbitron;
    color:white;
}

.block{
    background-color: #337ab7;
    opacity: .7;
    padding:10px;
    width:50%;
    margin-right: auto;
    margin-left: auto;
    border-radius:5px;
}

.nav-pills{
    font-size: 1.7em;
    background-color: none;
    margin-bottom: 10%
}

h1{
    padding:0;
    margin-top: 0px;
    font-size: 5.0em;
}

.btn-default{
    font-size:1.7em;
    color:#337ab7;
}

.pageOne{
    background: url("../images/mountains.jpg");
    background-repeat: none;
    background-size: cover;
    display: inline-block;
    height: 1000px;
    width: 100%;
}

.pageTwo{
    background: url("../images/darkmountains.jpg");
    background-repeat: none;
    background-size: cover;
    display: inline-block;
    height: 1000px;
    width: 100%;
    background-size: cover;
    padding-top:5%;
}

.pageTwoblock{
    background-color: #337ab7;
    opacity: .7;
    padding:10px;
    border-radius:5px;
}

p{
    font-size: 2.5em;
}

Link to webpage

Answer 1

快速解决方案是添加课程＆＃34; col-md-6＆＃34;用class＆＃34; pageTwoblock＆＃34;

来划分

<div class="col-md-6 pageTwoblock">

不能操纵div我想要的

1 个答案: