[英]Figuring out CSS for a three column layout with header [sketch included]
I'm using this CSS track to get the hang of what's happening in the browser. 我正在使用此CSS轨道来掌握浏览器中正在发生的事情。 However, the last assignment was an incomplete success .
但是,最后的任务是不完全的成功 。 How can I push the
post-updates
section not only right, but to the top of the page?. 如何将“
post-updates
部分不仅推向右侧,而且推到页面顶部? (So far I've tried position: absolute
without much luck). (到目前为止,我已经尝试过
position: absolute
没有运气)。
ed: Both answers helped, I am grateful. 埃德:这两个答案都对我有所帮助。
You can try this: 您可以尝试以下方法:
#post-update {
position:absolute;
top:0; right:0;
}
Good Luck... 祝好运...
The <div id="post-update">
needs to be floated right and the width of the header narrowed to fit in the screen. <div id="post-update">
需要向右浮动,并且标题的宽度必须变窄以适合屏幕。
HTML 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 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.