Question

问题 - 如何从下面的示例中移动线条＆＃34;嗨我是一个喜欢干净的＆amp; amp;优雅的代码＆＃34;

从这个位置

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

进入这个位置

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

该部分的HTML（任何事情的顺序都不会被大意改变EX.cant只是移动＆＃34;嗨，我是开发人员......＆＃34;正好在＆＃ 34;关于我的一点点＆＃34; line）

<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;
}

Answer 1

<强>更新

以下示例已更新为针对您的用例的纯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 & 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 & 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>段之前的右侧即可。

将单词移动到特定区域

1 个答案: