html – 将h3单词对齐到右下角

2019年7月21日 278次阅读

我希望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;

     }

最佳答案 看看这个
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>
点赞