移動的話到一個特定的區域

Problem-如何將線從下面這個例子中移動「嗨，我是一個愛乾淨的&優雅的代碼開發」移動的話到一個特定的區域

從這個位置

http://i.stack.imgur.com/UgrC9.png

到這個位置

http://i.stack.imgur.com/6yEMO.png

該部分的HTML（任何東西的順序都不會被改變EXCANT只是移動「嗨，我是一個開發人員......」就在「關於我的一點點」行上面）

<body> 
    <header> 
    <div class="full-width"> 
     <div class="half-width"> 
     <h1>Jubilee Austin</h1> 
     </div> 
     <div class="half-width"> 
     <h2><span>Hi,</span> i'm a developer that loves clean &amp; elegant code. 
     </h2> 
     <nav> 
      <ul> 
      <li><a href="#about">About</a></li> 
      <li><a href="#work">Work</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </nav> 
     </div> 
    </div> 
    </header> 
    <main> 
    <section id="about"> 
     <div class="full-width"> 
     <h2>A little bit about me</h2> 
     <div class="half-width"> 
      <p> i've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism.As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p> 
     </div> 
      <div class="half-width"> 
      <p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom &amp; versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p> 
      </div> 
      </div> 
    </section>

整個CSS

/****Base syles***/ 
body { 
    font-family: 'Source Sans Pro', sans-serif; 
} 
#about, #work, #contact { 
    height: 600px; 
    border: solid red; 
} 
/***Grid***/ 
.full-width{ 
    width:1200px; 
    margin: 0 auto; 
} 
.half-width{ 
    width:600px; 
    float:left; 
} 
.third-width{ 
    width:400px: 
    float:left; 
} 
/***About specific***/ 
#about .full-width{ 
    padding:80px 0; 
} 
#about h2{ 
    font-family: 'Lora', serif; 
    font-size:36px; 
    color:#262a2b; 
} 

#about p{ 
    font-size:21px; 
    color:#7f7f7f; 
    line-height:42px; 
    padding-right:50px; 
}

來源

2016-04-25 Blink8278

更新：

下面的例子已經更新爲純CSS解決你的使用情況關於保持文件結構相同。下面是相關珍聞：

@media (max-width: 1234px) { 
    .hi { 
    left: 10px; 
    } 
} 

@media (min-width: 1235px) { 
    .hi { 
    left: calc(50% - 600px); 
    } 
} 

.hi { 
    position: absolute; 
    top: 60px; 
}

注：

position: absolute用於將元件從普通文檔流移動到需要的地方。
@media查詢用於匹配您的width設置。
奇數1234px/1235px是從您width超過.full-width類中指定的值時算起的。它將指定全寬的1200px與來自瀏覽器滾動條的20px和來自應用於文檔主體的默認邊距的14px/15px相結合。

見和運行下面的代碼，看看它滿足你的使用情況：

/****Base syles***/ 
 
body { 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
} 
 
#about, #work, #contact { 
 
    height: 600px; 
 
    border: solid red; 
 
} 
 
/***Grid***/ 
 
.full-width{ 
 
    width:1200px; 
 
    margin: 0 auto; 
 
} 
 
.half-width{ 
 
    width:600px; 
 
    float:left; 
 
} 
 
.third-width{ 
 
    width:400px; 
 
    float:left; 
 
} 
 

 
@media (max-width: 1234px) { 
 
    .hi { 
 
    left: 10px; 
 
    } 
 
} 
 

 
@media (min-width: 1235px) { 
 
    .hi { 
 
    left: calc(50% - 600px); 
 
    } 
 
} 
 

 
.hi { 
 
    position: absolute; 
 
    top: 60px; 
 
} 
 

 
/***About specific***/ 
 
#about .full-width{ 
 
    padding:80px 0; 
 
} 
 
#about h2{ 
 
    font-family: 'Lora', serif; 
 
    font-size:36px; 
 
    color:#262a2b; 
 
} 
 

 
#about p{ 
 
    font-size:21px; 
 
    color:#7f7f7f; 
 
    line-height:42px; 
 
    padding-right:50px; 
 
}

<body> 
 
    <header> 
 
    <div class="full-width"> 
 
     <div class="half-width"> 
 
     <h1>Jubilee Austin</h1> 
 
     </div> 
 
     <div class="half-width"> 
 
     <h2 class='hi'><span>Hi,</span> i'm a developer that loves clean &amp; elegant code.</h2> 
 
     <nav> 
 
      <ul> 
 
      <li><a href="#about">About</a></li> 
 
      <li><a href="#work">Work</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
      </ul> 
 
     </nav> 
 
     </div> 
 
    </div> 
 
    </header> 
 
    <main> 
 
    <section id="about"> 
 
     <div class="full-width"> 
 
      
 
      
 
     <h2>A little bit about me</h2> 
 
     <div class="half-width"> 
 
      <p> i've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism.As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p> 
 
     </div> 
 
      <div class="half-width"> 
 
      <p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom &amp; versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p> 
 
      </div> 
 
      </div> 
 
    </section>

舊的解決方案：你可以只移動<h2><span>Hi,</span> i'm a developer that loves clean & elegant code.</h2>行權前的<h2>A little bit about me</h2>段。

來源

2016-04-25 01:18:59 timolawl

這不是一個錯誤的答案，它的正確性，但它在我的情況下是不正確的，我的問題的邊界信息HTML需要是確切的，並且不能被移動像這樣，我想它可能更多用CSS做 – Blink8278

沒問題。但我和其他人只能根據您提供給我們的信息。您能否詳細說明您的問題中的要求，以便其他人可以完全理解您要求的內容？ – timolawl

我已經更新了您的用例的答案。純粹的CSS！ – timolawl

移動的話到一個特定的區域

回答

相關問題