Worte in einen bestimmten Bereich bewegt

Problem- Wie die Linie von diesem Beispiel unten bewegen „Hallo, ich bin ein Entwickler, die sauber & elegant Code liebt“Worte in einen bestimmten Bereich bewegt

Aus dieser Position

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

in dieser Position

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

HTML des Abschnitts (die Reihenfolge von irgendetwas ist nicht laut zu ändern. EX.cant einfach verschieben "Hallo, ich bin ein Entwickler ..." direkt über der "Ein bisschen über mich" -Linie)

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

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

Quelle

2016-04-25 Blink8278

Update:

Das folgende Beispiel wurde auf eine reine CSS-Lösung auf Ihren Anwendungsfall aktualisiert in Bezug auf die Dokumentstruktur gleich bleiben. Hier ist der relevante tidbit:

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

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

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

Hinweise:

position: absolute verwendet wird, um das Element aus dem normalen Dokumentenfluss zu bewegen, wo es gebraucht wird.
@media Abfragen werden verwendet, um Ihre width Einstellungen zu entsprechen.
die ungeraden Zahlen 1234px/1235px werden berechnet, wenn Sie width überschreitet, dass in Ihrer .full-width Klasse angegeben. Es kombiniert die 1200px Ihrer angegebenen vollen Breite mit 20px von der Browser-Bildlaufleiste und 14px/15px von der Standard-Marge für den Dokumentkörper angewendet.

Sehen und den Code ausführen, um zu sehen, dass es Ihren Anwendungsfall genügt:

/****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>

Alte Lösung: Sie können nur die <h2><span>Hi,</span> i'm a developer that loves clean & elegant code.</h2> Linie nach rechts vor dem Umzug <h2>A little bit about me</h2> Segment.

Quelle

2016-04-25 01:18:59 timolawl

Dies ist keine schlechte Antwort, es ist korrekt, aber es ist nicht richtig in meiner Situation, Seiteninformationen für meine Frage der HTML benötigt um genau zu sein und kann nicht einfach so bewegt werden, ich denke es ist wahrscheinlich mehr zu tun mit der CSS – Blink8278

Kein Problem. Aber ich und andere können nur mit den Informationen arbeiten, die Sie uns zur Verfügung stellen. Können Sie bitte detailliert erläutern, was Ihre Anforderungen in Ihrer Frage sind, damit andere vollständig verstehen, wonach Sie fragen? – timolawl

Ich habe die Antwort auf Ihren Anwendungsfall aktualisiert. Reines CSS! – timolawl

Worte in einen bestimmten Bereich bewegt

Antwort

Verwandte Themen