将对象与标题底部对齐

我已成功在本网站的简历部分存储PDF对象。但是，我试图将对象的顶部（在本例中为PDF查看器）与标题的底部（在即将显示的屏幕截图中用灰线表示）对齐。我一直在Object的顶部和header的底部之间留下空白，如screenshot所示。将对象与标题底部对齐

这里是有问题的主体部分的HTML：

<body> 
    <header> 
     <a href="index.html" id="logo"> <h1> 
     <div id="header_title"> 
      Title 
     </div></h1> </a> 
     <div id="header_border"></div> 
     <nav id="nav"> 
      <ul> 
       <li> 
        <a href="index.html" class="selected" >About</a> 
       </li> 
       <li> 
        <a href="resume.html">Resume</a> 
       </li> 
       <li class="subNav"> 
        <a>Portfolio</a> 
        <ul> 
         <li> 
          <a href="writing_samples.html">Writing Samples</a> 
         </li> 
         <li> 
          <a href="photoshop.html">Photoshop</a> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <a href="contact.html">Contact</a> 
       </li> 
      </ul> 
     </nav> 
    </header> 
    <object id="resume" data="img/Resume.pdf" type="application/pdf" style="float: left" width="100%" height="100%"> 

     <p> 
      It appears you don't have a PDF plugin for this browser. 
      No biggie... you can <a href="myfile.pdf">click here to 
      download the PDF file.</a> 
     </p> 

    </object> 

</body>

和CSS：

html { 
    height: 100%; 
} 
body { 
    font-family: 'Playfair Display', open sans; 
    height: 100%; 

} 

#wrapper { 
    max-width: 940px; 
    margin: 0 auto; 
    padding: 0 5%; 
} 

a { 
    text-decoration: none; 
} 

img { 
    max-width: 100%; /* images fill width of parent container 
    image will shrink with size of container */ 
} 

h3 { 
    margin: 0 0 1em 0; 
} 

/************************ 
HEADING 
*************************/ 

header { 
    position: relative; 
    float: left; 
    margin: 0 0 30px 0; /* top, right, bottom, left */ 
    padding: 5px 0 0 0; /* ibid */ 
    width: 100%; /* since floated, this element does not have an 
    explicit width; therefore, it must be assigned to 100% 
    of page*/ 

} 


#logo { 
    text-align: center; 
    margin: 0; 
} 

h1 { 
    font-family: 'Playfair Display', open sans; 
    /* font-size: 100px; font-size is overruled in responsive.css 
          for computer screens set in min-width 660*/ 
    margin: 85px 0; 
    font-weight: normal; 
    /* font-weight: normal; will unbold the headline, as headlines 
    are set to bold by default. */ 
    line-height: 0.8em; 

} 

#header_title { 
    position: absolute; 
    bottom: 0; 
    left: 50px; 
    padding: 10px 0; 
} 

#header_border { 
    width: calc(95% - 70px); 
    position: absolute; 
    bottom: 0; 
    margin-left: 50px; 

    border-bottom: 2px solid #dddede; 
} 


/************************ 
NAVIGATION 
*************************/ 

nav { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding: 10px 0; 
} 

nav ul { 
    list-style: none; 
    margin: 0 10px; 
    padding: 0; 
} 

nav > ul > li { /* only impacts the first list items; keeps About, Portfolio, Contacts in horizontal line*/ 
    display: inline-block; 
    position: relative; 
} 

nav > ul> li> a { 
    font-weight: 800; 
    padding: 15px 10px; 
} 

nav > ul > li.subNav ul > li> a { 
} 

nav > ul > li.subNav ul { /* now free to style/block secondary list*/ 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    white-space: nowrap; 
    background: pink; 
} 

nav ul li.subNav:hover ul { 
    display: block; 
    text-align: left; 
} 

/*********************** 
* BODY 
*/ 

#resume { 
    height: 100%; 
    width: 100%; 
}

来源

2016-03-04 dsideb

尝试'垂直对齐：顶部;' –

你的标题样式有30PX底部保证金。删除这个，对象将与您的标题的底部对齐。

margin: 0 0 30px 0; /* top, right, bottom, left */

应该是

margin: 0;

来源

2016-03-04 01:57:10 kravse

将对象与标题底部对齐

回答

相关问题