问题 - 如何从下面的示例中移动该线路，“嗨，我是一个喜欢干净而优雅的代码的开发人员”
从这个位置
https：//i.sstatic.net/ugrc9.png
在这个位置
https：//i.sstatic.net/6yemo.png
html（不允许任何事物的顺序更改。
<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 & 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>
/****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;
}
update：
下面的示例已更新为纯CSS解决方案，以使文档结构保持不变。这是相关的花序：
@media (max-width: 1234px) {
.hi {
left: 10px;
}
}
@media (min-width: 1235px) {
.hi {
left: calc(50% - 600px);
}
}
.hi {
position: absolute;
top: 60px;
}
注：
position: absolute用于将元素从普通文档流中移出到需要的位置。
@mediawidth奇数
1234px/1235pxwidth超过
.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>段之前。