html/css - 佈局自動保證金 - 左

我創建了幾個佈局，其中一個做錯了。我希望把佈局從紅「廣場」（參見下圖）爲紅藍「廣場」：html/css - 佈局自動保證金 - 左

HTML：

<header> 

    <div id="container"> 
     <div id="nav"> 
      <div class="logo"> 
       <p> 
        <a href="#"> <span>The</span>&nbsp;Chance </a> 
       </p> 
      </div> 

      <ul class="menu"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Service</a></li> 
       <li><a href="#">Project</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 

     <div id="current"> 
      <h1>charity details</h1> 
      <h3>home/charity details</h3> 
     </div> 
    </div> 

</header>

CSS：

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800'); 
body { 
    font-family: 'Open Sans', sans-serif; 
} 


header { 
    width: 100%; 
    height: 350px; 
    background-image: url(../img/background-header.jpeg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    background-color: #0b261a; 
    padding-top: 60px; 
} 

header #container #nav { 
    width: 100%; 
    display: block; 
} 

header #container #nav .logo { 
    color: #fff; 
    display: inline-block; 
    float: left; 
} 

header #container #nav .logo p { 
    font-size: 22px; 
    font-weight: 500; 
} 

header #container #nav .logo p a { 
    color: #fff; 
    text-decoration: none; 

} 

header #container #nav ul.menu { 
    display: inline-block; 
    float: right; 
} 


header #container #nav ul.menu li { 
    display: inline-block; 
    color: #fff; 
    font-weight: 500; 
    text-transform: uppercase; 
    margin-right: 25px; 
} 

header #container #nav ul.menu li:last-child { 
    margin-right: 0; 
} 

header #container #nav ul.menu li a { 
    color: #fff; 
    text-decoration: none; 
} 

header #container #current { 
    display: block; 
    width: 100%; 
} 

header #container #current h1, header #container #current h2, 
header #container #current h3, header #container #current h4, 
header #container #current h5 { 
    color: #fff; 
} 

/* browser 1680px+ */ 
@media screen and (min-width:1680px){ 
    header #container { 
     width: 1080px; 
     margin: 0 auto; 
    } 
}

來源

2017-03-20 LOWLOW

通過將容器設置爲相對位置，然後可以將其他元素與其相關聯。這應該讓你開始：

#container {position: relative; } 

#current { 
position: absolute; 
top: 200px; 
left: 0px; 
}

來源

2017-03-20 15:20:10 mayersdesign

你可以設置位置，

header #container #current { 
position: absolute; 
left: 0; 
bottom: 20px; 
width: 100%; 
}

您可以調整底值。

來源

2017-03-20 15:21:44

你可以實現這個CSS。

保持父容器相對於視口

#container { position : relative;}

，然後設置絕對位置的子元素：

#current { position:absolute; 
      top:100px; /*or required margin from top*/ 
      left:10px /*Required left margin */ 
     }

注意：避免使用的ID。嘗試課

來源

2017-03-20 15:24:22

html/css - 佈局自動保證金 - 左

回答

相關問題