html - 将 h3 单词右下对齐

Question

我希望 h3“广告商”将在“MYNAME”一词下对齐

这是小提琴的例子：http: //jsfiddle.net/Uvv9M/2/

的CSS：

#first_section {
   margin:  0 auto;
   margin-top: 200px;
   width: 100%;
   height: 776px;
   font-family: 'Raleway', sans-serif;

}

#square {
    width:865px;
    height:3px;
    background-color: black;
    margin:0 auto;
}
#first_section_txt {
    width:100%;
    margin:0 auto;
    text-align:center;
    font-size:2em;
    word-wrap:word-break;
    font-family:'Source Code Pro', sans-serif;
}

#first_section img {
 margin-left: 25%;
 margin-top: -90px;
 clear: both;

}

.clear_both {
   clear: both;
}
h1 { font-family: 'Source Code Pro', sans-serif;
    font-weight: 500;
    font-size: 111px;
    display: inline;
    color: #4a4949;
     }
h2 { font-family: 'Source Code Pro', sans-serif;
    font-weight: 400;
    font-size: 111px;
    display: inline;
    color: #c0c0c0;
     }
h3 { font-family: 'Source Code Pro', sans-serif;
    font-weight: 200;
    font-size: 25px;
    display: inline;
    color: #a7a7a7;
    float: right;

     }

Answer 1

看看这个小提琴

CSS：

#first_section {
   margin:  0 auto;
   margin-top: 200px;
   width: 100%;
   height: 776px;
   font-family: 'Raleway', sans-serif;

}

#first_section_txt {
    width:850px;
    margin:0 auto;
    text-align:center;
    font-size:2em;
    word-wrap:word-break;
    font-family:'Source Code Pro', sans-serif;
}

#first_section img {
 margin-left: 25%;
 margin-top: -90px;
 clear: both;

}

h1 { font-family: 'Source Code Pro', sans-serif;
    font-weight: 500;
    font-size: 111px;
    display: inline;
    color: #4a4949;
     }
h2 { font-family: 'Source Code Pro', sans-serif;
    font-weight: 400;
    font-size: 111px;
    display: inline;
    color: #c0c0c0;
     }
h3 { font-family: 'Source Code Pro', sans-serif;
    font-weight: 200;
    font-size: 25px;
    margin-top:0px;
    display: block;
    color: #a7a7a7;
    text-align: right;
    border-top:3px solid #000;
}

HTML：

<div id="first_section">
  <div id="first_section_txt">
      <h1>THIS</h1><h2>MYNAME</h2>
      <h3>Graphic Designer and web Advertiser</h3>
  </div>
  <img src="images/me.png" />
</div>

Answer 2

现场演示

糟糕的 SEO的一个很好的例子：

<h1>THIS</h1><h2>MYNAME</h2>

应该：

<h1>THIS<span>MYNAME</span></h1>

现在，您可以添加一个边框底部而不是做一条线（#square...删除它）h1

比以你的内心#first_section_txt为中心width: 960px

#first_section {
   margin:  0 auto;
   margin-top: 200px;
   width: 100%;
   height: 776px;
   font-family: 'Raleway', sans-serif;
}
#first_section_txt {
    position:relative;
    width:960px;
    margin:0 auto;
    font-family:'Source Code Pro', sans-serif;
}

#first_section img {
    margin-left: 25%;
    margin-top: -90px;
    clear: both;
}
h1 {
    text-align:right;
    font-weight: 500;
    font-size: 111px;
    border-bottom:2px solid #4A4949;
    color: #4a4949;
    margin:0px;
    padding-bottom:10px
}
h1 > span{
    color: #c0c0c0;
 }
#first_section_txt > h3 {
    font-weight: 200;
    font-size: 25px;
    color: #a7a7a7;
    text-align:right;
}