Выяснение CSS для трехколоночного макета с заголовком [набросок включен]

Question

Выяснение CSS для трехколоночного макета с заголовком [набросок включен]

0

Я использую этот трек CSS, чтобы узнать, что происходит в браузере. Однако последнее задание было неполным успехом. Как я могу нажать раздел post-updates не только вправо, но и в верхней части страницы?. (Пока я пробовал position: absolute без особого счастья).

ed: Оба ответа помогли, я благодарен.

mehr 18 фев. 2014, в 13:58

Источник

Теги:

html

css

2 ответа

1

Вы можете попробовать следующее:

Рабочий скрипт здесь

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

Удачи...

Pradeep Pansari 18 фев. 2014, в 09:29

0

Зачем вам плавать и позиционировать это абсолютно?
Paulie_D 18 фев. 2014, в 12:24
0

Я обновил свой ответ ..
Pradeep Pansari 18 фев. 2014, в 12:25

Ещё вопросы

Зачем вам плавать и позиционировать это абсолютно?

Paulie_D · Accepted Answer · 2014-02-18T09-48-00.000Z

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