Question

所以我正在做一个基本的布局。我通常采用创意公共布局，但这次我决定建立自己的布局。

所以基本上我正在制作一个非常基本的页面，其顶部有100％的宽度。然后我们有一个display:table-cell部分将两个部分并排放置。

这似乎有效但我的<h1></h1>被放置在该区域的底部。我希望内容处于最顶层。

这是我的代码：

section  
{
    display: block;

}

#instructions 
{
    width: 100%;
    background-color: bisque;
    height: auto;
    padding: 20px;
}

#picture 
{
    width: 100% auto;
    height: auto;
    background-color:  aliceblue;
    padding: 30px;
    border: 10px solid #000;
    display: table-cell;
}
#content 
{
    width: 100%;
    display: table-cell;
    padding: 25px;
    position: relative;
}

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Alberta Map</title>
    <meta name="description" content="Learning Alberta's Geography">
    <link rel="stylesheet" href="main.css">
</head>
<body>

<section id="instructions">
<h1>Learning Altberta's Geography</h1>
    <p>bla bla bla bla</p>
</section>

<section id="picture">
    <img src="alberta.jpg"></img>    
</section>

<section id="content">
<h1> Lake....</h1>

</section>


</body>

这输出的是以下问题：

最终，我希望内容ID上的文字从该部分的顶部开始。

我该怎么办？为什么在该部分的底部？

由于

Answer 1

我认为你所需要的只是vertical-align:top

＆＃13;

    #instructions {
      background-color: bisque;
      padding: 20px;
    }
    #picture {
      background-color: aliceblue;
      padding: 30px;
      border: 10px solid #000;
      display: table-cell;
    }
    #content {
      display: table-cell;
      padding: 25px;
      font-size: 16px;
      vertical-align: top;
    }

＆＃13;

<section id="instructions">
  <h1>Learning Altberta's Geography</h1>

  <p>bla bla bla bla</p>
</section>
<section id="picture">
  <img src="http://lorempixel.com/output/city-h-c-100-200-6.jpg" />
</section>
<section id="content">
  <h1> Lake....</h1>

</section>

＆＃13;

Answer 2

添加

vertical-align:top;

到

#content

Answer 3

这是正确的添加vertical-align：top;

CSS3 HTML5：边栏位置

3 个答案: