Question

我制作了一个tumblr主题，侧面有4个div。在我将这些添加到主题之前，我的＆＃34;帖子＆＃34;元素位于页面顶部附近（与div现在的位置平行），但是一旦我添加了侧边栏项目，他们就会推送＆＃34; post＆＃34;元素在页面下方。我曾尝试调整.post的边距，但这会将所有帖子放在一起。我也寻找任何缺失的大括号和封闭的div，但没有看到任何。如何在不影响侧边栏的情况下垂直移动.post？注意：在CSS中，侧边栏是4个div，名为＆＃34; greetings＆＃34;，＆＃34; current＆＃34;，＆＃34; goals＆＃34;和＆＃34; twitterwidget＆＃34;。 Here是代码，

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{Title}</title>
<style>

 header a { /* navbar or link (?) link color */
    color: white;
    }
 h1 { /*header text */
      font-size: 10px;
      font-family: Calibri, Candara, Segoe; /* font */
      font-style: oblique;
    }
 h2 { /*title */
      font-size: 20px;
      font-family: Calibri, Candara, Segoe; /* font */
      font-style: oblique;
      text-align: right;
      color: #fff;
    }
  h3 { /*description */
      color: #cccccc;
      float: left;
      font-family: Calibri, Candara, Segoe; /* font */
      text-align: left;
      font-size: 10px;
      padding: 10px;
  }

 div.navstuff { 
    list-style-type: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    background-color: #f1f1f1;
    font-size: 20px;
    font-family: Calibri, Candara, Segoe; /* font */
    font-style: oblique;
    height:30px;
    width:800px; /*set to 100% to have across entire page */
    }
    li {
    /*display:inline-block;*/
    text-align:center;
    }
    .navstuff li { /*navstuff and tag text color */
    color: #e2d6db;
    font-family: Calibri, Candara, Segoe; /* font */
    margin:auto;
    padding: 5px 5px;
    text-decoration: none;
    }
    div.navstuff:hover, { /*link hover change color */
    background-color: #fee4f0;
    }
 .fixedheader {
     width:100%;
     height: 10px;
     background:#fee4f0;
     position: fixed;
     top: 0;
     z-index:1;
 }
 .thinheader {
     width:800px;
     height: 10px;
     margin:auto;
     background:#fee4f0;
     position: static;
     z-index:100;
 }
 .greetings {
     width: 230px;
     height: 85px;
     background: #fff;
     position: static;
     margin: 30px 0px 0px 817px;
 }
 .current {
     width: 230px;
     height: 185px;
     background: #fff;
     position: static;
     margin:50px 0px 0px 817px;
 }
 .goals {
     width: 230px;
     height: 150px;
     background: #fff;
     position: static;
     margin:70px 0px 0px 817px;
 }
 .twitterwidget {
     width: 230px;
     height: 100px;
     background: #fff;
     position: static;
     margin: 73px 0px 0px 817px;
 }
  body {
    background-image:url("http://static.tumblr.com/jm9hbfa/SuMobivqi/bk.gif");
    background-repeat: repeat;
    background-attachment: fixed;
    padding: 0px;
    font-family: Calibri, Candara, Segoe; /* font */
    font-size: 10px; /* font size */
    color: gray; /* font color */
    }
  .post {
    width: 500px;
    padding: 20px;
    border-radius: 6px;
    margin: 30px 240px;
    background: #fff;
  }
  /*.headavatar { /must change to put on right side /
    position: static;
    right: 20px;
    top: 300px;
    border-radius: 100%;
    padding: 10px;
    border-radius: 90px;
    border: 3px solid white; } */
  .descripbox { /*must change to put on right side */
      position: fixed;
      right: 45px;
      top: 222px;
  }
  .titlebox { /*must change to put on right side */
      position: fixed;
      right: 45px;
      top: 210px;
  } 
  .like-reblog {
    list-style: none;
    border: 1px solid #ccc;
  }
    .like-reblog li {
    display:inline-block;
    float: right;
    padding: 6px;
    height: 20px;
  }
  .tags {
      text-align: left;
      margin: 0;
      padding: 0;
      list-style-type: none;
  }
  a {
    color: #808080; /*link color */
    }
  a:hover {
        color: #f5cfe0; /*hover over link */
    }
.pagenav { /*next page or back page */
    width: 100%;
    position: fixed;
    text-align: center;
    bottom: 0px;
    color: white;
    font-family: Calibri, Candara, Segoe; /* font */
}
#cornerpic { /* theme credit link logo thing */
    position:fixed;
    right: 5px;
    bottom: 5px;
    z-index: 100;
}
.postnotes { /* notes from a post within permalink */
    text-align: center;
}
.avatar { /*make those other peoples avs go away */
    display: none; /*pls make the ugly avatars go away */
}
</style>
</head>

<body>
  <header>
    <!--<h1>Insert title here</h1>-->
    <div class="navstuff">
      <!--<li><a class="active" href="#home">Home</a></li>
      <li><a href="#ask">Ask</a></li>
      <li><a href="#about">About Me</a></li>
      <li><a href="#archive">Archive</a></li>-->
      <li><center>日本語の勉強</center></li>
    </div>
    <div class="fixedheader"></div>
    <div class="thinheader"></div>
    <div class="greetings"></div>
    <div class="current"></div>
    <div class="goals"></div>
    <div class="twitterwidget"></div>

  <!--<img class="headavatar" src="{PortraitURL-128}">-->
        <div class="descripbox">
            {block:Description}
            <h2>{Description}</h2>
            {/block:Description}
        </div>
        <div class="titlebox">
            <h1><a href="{BlogURL}">{Title}</a></h1>
        </div>
  </header>
  <img class="avatar">
    {block:HasPages}
       <div class="page">
        {block:Pages}
        {/block:Pages}
       </div>
    {/block:HasPages}

    {block:Posts}

        {block:Text}
        <div class="post">
            {block:Title}
                <h3>
                    <a href="{Permalink}">{Title}</a>
                </h3>
            {/block:Title}
            {Body}
            <ul class="like-reblog">
              <li>{LikeButton}</li>
              <li>{ReblogButton}</li>
              <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCount}</a>{/block:NoteCount}</li>
              <li>{block:Date}<a href="{Permalink}">{Month}&#x2606;{DayofMonth}{DayOfMonthSuffix} {Year}</a>{/block:Date}</li>
            </ul>
            {block:HasTags}
            <ul class="tags">
                <li>{block:Tags}<a href="{TagURL}">{Tag}</a></li>{/block:Tags}
            </ul>
            {/block:HasTags}
            </div>
            {block:PostNotes}<div class="postnotes">{PostNotes}</div>{/block:PostNotes}
        {/block:Text}

        {block:Photo}
        <div class="post">
            <img src="{PhotoURL-500}">
          {block:Caption}{Caption}{/block:Caption}
            <ul class="like-reblog">
              <li>{LikeButton}</li>
              <li>{ReblogButton}</li>
              <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCount}</a>{/block:NoteCount}</li>
              <li>{block:Date}<a href="{Permalink}">{Month}&#x2606;{DayofMonth}{DayOfMonthSuffix} {Year}</a>{/block:Date}</li>
            </ul>
            {block:HasTags}
            <ul class="tags">
                <li>{block:Tags}<a href="{TagURL}">{Tag}</a></li>{/block:Tags}
            </ul>
            {/block:HasTags}
        </div>
        {block:PostNotes}<div class="postnotes">{PostNotes}</div>{/block:PostNotes}
        {/block:Photo}

        {block:Quote}
        <div class="post">
          {Quote}
          {block:Source}<br>&mdash;{Source}{/block:Source}
            <ul class="like-reblog">
              <li>{LikeButton}</li>
              <li>{ReblogButton}</li>
              <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCount}</a>{/block:NoteCount}</li>
              <li>{block:Date}<a href="{Permalink}">{Month}&#x2606;{DayofMonth}{DayOfMonthSuffix} {Year}</a>{/block:Date}</li>
            </ul>
            {block:HasTags}
            <ul class="tags">
                <li>{block:Tags}<a href="{TagURL}">{Tag}</a></li>{/block:Tags}
            </ul>
            {/block:HasTags}
         </div>
         {block:PostNotes}<div class="postnotes">{PostNotes}</div>{/block:PostNotes}
        {/block:Quote}

        {block:Link}
        <div class="post">
          <a href="{URL}" {Target}>{Name}</a>
          {block:Description}{Description}{/block:Description}
            <ul class="like-reblog">
              <li>{LikeButton}</li>
              <li>{ReblogButton}</li>
              <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCount}</a>{/block:NoteCount}</li>
              <li>{block:Date}<a href="{Permalink}">{Month}&#x2606;{DayofMonth}{DayOfMonthSuffix} {Year}</a>{/block:Date}</li>
            </ul>
            {block:HasTags}
            <ul class="tags">
                <li>{block:Tags}<a href="{TagURL}">{Tag}</a></li>{/block:Tags}
            </ul>
            {/block:HasTags}
        </div>
        {block:PostNotes}<div class="postnotes">{PostNotes}</div>{/block:PostNotes}
          {/block:Link}

          {block:Chat}
          <div class="post">
            <table>
              {block:Lines}
               <tr>
                <th>{block:Label}{Label}{/block:Label}</th>
                <td>{Line}</td>
              </tr>
              {/block:Lines}
            </table>
            <ul class="like-reblog">
              <li>{LikeButton}</li>
              <li>{ReblogButton}</li>
              <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCount}</a>{/block:NoteCount}</li>
              <li>{block:Date}<a href="{Permalink}">{Month}&#x2606;{DayOfMonthSuffix} {Year}</a>{/block:Date}</li>
            </ul>
            {block:HasTags}
            <ul class="tags">
                <li>{block:Tags}<a href="{TagURL}">{Tag}</a></li>{/block:Tags}
            </ul>
            {/block:HasTags}
          </div>
          {block:PostNotes}<div class="postnotes">{PostNotes}</div>{/block:PostNotes}
          {/block:Chat}

          {block:Audio}
          <div class="post">
            {AudioPlayer}
            {block:Caption}{Caption}{/block:Caption}
            <ul class="like-reblog">
              <li>{LikeButton}</li>
              <li>{ReblogButton}</li>
              <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCount}</a>{/block:NoteCount}</li>
              <li>{block:Date}<a href="{Permalink}">{Month}&#x2606;{DayofMonth}{DayOfMonthSuffix} {Year}</a>{/block:Date}</li>
            </ul>
            {block:HasTags}
            <ul class="tags">
                <li>{block:Tags}<a href="{TagURL}">{Tag}</a></li>{/block:Tags}
            </ul>
            {/block:HasTags}
          </div>
          {block:PostNotes}<div class="postnotes">{PostNotes}</div>{/block:PostNotes}
          {/block:Audio}

          {block:Video}
          <div class="post">
          {Video-500}
          {block:Caption}{Caption}{/block:Caption}
            <ul class="like-reblog">
              <li>{LikeButton}</li>
              <li>{ReblogButton}</li>
              <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCount}</a>{/block:NoteCount}</li>
              <li>{block:Date}<a href="{Permalink}">{Month}&#x2606;{DayofMonth}{DayOfMonthSuffix} {Year}</a>{/block:Date}</li>
            </ul>
            {block:HasTags}
            <ul class="tags">
                <li>{block:Tags}<a href="{TagURL}">{Tag}</a></li>{/block:Tags}
            </ul>
            {/block:HasTags}
          </div>
          {block:PostNotes}<div class="postnotes">{PostNotes}</div>{/block:PostNotes}
          {/block:Video}

    {/block:Posts}

  {block:Pagination}
  <div class="pagenav">
      {block:PreviousPage}<font color="white"><a href="{PreviousPage}">backward &#9756;</a></font>{/block:PreviousPage}
      {block:NextPage}<font color="white"><a href="{NextPage}">forward &#9758;</a></font>{/block:NextPage}{/block:Pagination}
    </div>
</body>
</html>

谢谢。

Answer 1

如果你仍然需要这个答案，我所做的是使用内联块和浮动来对齐侧边栏和内容。我为每个内容和侧边栏创建了包装器，然后将所有内容包装在一个总体元素中：

HTML5：

<body>
    <header>
        your header content goes here
    </header>
    <main id="wrapper">
        <aside>
            <div class="side">content 1</div>
            <div class="side">content 2</div>
            <div class="side">content 3</div>
            <div class="side">content 4</div>
        </aside>
        <section>
            {block:Posts}
            <article class="entry">

                {block:Text}
                    html for text posts
                {/block:Text}
                {block:Photo}
                    html for photo posts
                {/block:Photo}
                {block:Photoset}
                    html for photosets
                {/block:Photoset}
                {block:Video}
                    html for videos
                {/block:Video}
                {block:Audio}
                    html for audio posts
                {/block:Audio}
                {block:Link}
                    html for link posts
                {/block:Link}
                {block:Chat}
                    html for chat posts
                {/block:Chat}
                {block:Answer}
                    html for ask posts
                {/block:Answer}

            </article>
            {/block:Posts}
        </section>
    </main>
</body>

CSS：

main {
    overflow:auto;
    width:920px; /* width of sidebar + width of posts + all padding, borders and margins associated with sidebar and posts */
}

aside, section {
    float:left;
    display:inline-block;
    vertical-align:top;
}

aside {width:250px; margin:20px; padding:10px; /* total of 310px */}
section {width:550px; margin:20px; padding:10px; /* total of 600px */}
article {width:540px; border:5px solid #fff; /* border is calculated in the width of the 'section' element */}

如果您需要右侧的侧边栏，只需切换浮动：

aside {float:right;}
section {float:left;}

jsfiddle：https://jsfiddle.net/t5et8er4/3/

Answer 2

为了并排阻止，我确实使用CSS3 flexboxes。它更容易使用，我在这里用侧边栏，页脚和标题上传了一个例子：

https://jsfiddle.net/abreneliere/mrjh6y2e/3/

在包含侧边栏和内容窗格的父元素中，我添加以下内容：

div#main /* parent div for sidebar and content */
{
  display: flex;
..

默认情况下，侧边栏和内容将并排显示，并且它们之间没有空格。

你可以在这里玩它们： http://www.w3schools.com/css/css3_flexbox.asp

为了使页眉，主页和页脚处于垂直方向，我添加了父元素：

div#myapp
{
  display: flex;
  flex-direction: column;

块用于基本的html元素，如果你在一个内联块中添加一个块作为子元素，它将返回到下一行。

如何移动侧边栏旁边的博客内容？

2 个答案: