Question

我正在使用此CSS track来了解浏览器中发生的事情。但是，最后一次分配是incomplete success。如何将post-updates部分不仅正确推送到页面顶部？（到目前为止，我已经尝试position: absolute没有太多运气了。

编辑：两个答案都有帮助，我很感激。

Answer 1

你可以试试这个：

<强> Working Fiddle here

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

祝你好运......

Answer 2

<div id="post-update">需要向右浮动，标题的宽度变窄以适应屏幕。

JSFiddle Demo

<强> 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;
}

使用标题[包含草图]确定三列布局的CSS

2 个答案: