找出具有標題[包括草圖]的三列布局的CSS

Question

我正在使用此CSS軌道來掌握瀏覽器中正在發生的事情。 但是，最后的任務是不完全的成功 。 如何將“ post-updates部分不僅推向右側，而且推到頁面頂部？ （到目前為止，我已經嘗試過position: absolute沒有運氣）。

埃德：這兩個答案都對我有所幫助。

Answer 1

您可以嘗試以下方法：

在這里工作小提琴

#post-update {
  position:absolute;
  top:0; right:0;
}

祝好運...

Answer 2

<div id="post-update">需要向右浮動，並且標題的寬度必須變窄以適合屏幕。

JSFiddle演示

HTML

<div id="content">

    <div id="header">
        <h1 id="stf">Stanford Connection</h1>
        <img src="//i62.tinypic.com/i2onyf.gif" alt="I'm a tree"/>  
    </div>

    <div id="about">
        <img src="//i62.tinypic.com/2vnkmtl.jpg" alt="Molly"/>
        <h2 class="section-heading">About Me</h2>
        <p><strong>Birthday:</strong> December 8, 2001</p>
        <p><strong>Gender:</strong> Female</p>

        <h2 class="section-heading">Friends</h2>
        <p><strong>Patrick Young</strong></p>
        <p><strong>Chloe Cox</strong></p>
    </div>

    <div id="updates">
        <h1>Molly the FloPup</h1>
        <h2 class="section-heading">Status Updates</h2>
        <p>When am I going to get fed?</p>
        <p>I want to go for a walk. </p>
        <p>There's a squirrel on the patio, why won't Patrick let me chase it? </p>
        <p>I really like summer, because I get to sun myself on the patio </p>
    </div>



</div>
    <div id="post-update">
        <h2 class="section-heading">Post Updates</h2>
        <form action="">
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <br>
            <input type="button" value="Submit New Update" align="left"/>
        </form>
    </div>

CSS

body {
  padding: 0.5em;  
}

strong {
  font-weight: bold;
}

h1 {
  font-size: 32pt;
  text-indent: 1em;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

#stf {
  margin-left:1em;
  line-height: 2.5em;  
  display: inline;      
  vertical-align: top;
}

#content {
    width:50em;
    float:left;


}

#header {
  background-color: #9A0000;
  color: white;
  height: 120px;
}

#header img {
  display: inline;
  vertical-align: top;
  float: right;  
}

.section-heading {
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  background-color: #CC9191;
  font-size: 13pt;
  padding-left: 0.5em;
  padding-bottom: 0.3em;
  padding-top: 0.3em;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

#about {
  width: 200px;
  font-family: sans-serif;
  font-size: 12pt;  
  float: left;
}

#about img {
  margin-top: 7px;
}

#updates {
  /* background: #AA4; */
    float:left;
    margin-left:10px;
}

#updates p {
  border-top: 2px solid black;
  line-height: 2em;
}

#post-update {
   float: right;
}

textarea {
  width: 17em;
  height: 7em;
}