Question

我希望h3“广告客户”在“MYNAME”字样下方右侧对齐

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

看看这个fiddle

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

LIVE DEMO

enter image description here

糟糕的搜索引擎优化的一个很好的例子：

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

应该是：

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

现在可以添加一个边框底部h1

而不是一行（#square ...删除它）

将内部#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;
}

将h3单词对齐到右下角

2 个答案: