無法操作div我想要什麼

如何讓文本保持在我網站上的正確位置並將div均勻地包裹在它的周圍？無法操作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

來源

2017-07-24 Daniel

你試過哪個div修改？ –

與類pageTwoblock – Daniel

快速的解決辦法是添加類「COL-MD-6」帶班「pageTwoblock」

到的div

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

來源

2017-07-25 00:16:09

的DIV我想你的建議，但仍然有多餘的空間，它是不是均勻分佈的 http://imgur.com/a/BjxxO – Daniel

所以現在只是刪除「COL-MD-6 「來自<div class =」col-md-6 text-center「> –

非常感謝！ – Daniel

無法操作div我想要什麼

回答

相關問題