页面结构未按预期排列

时间：2015-06-10 12:25:53

标签： html5 css3

我遇到了CSS问题（第一次体验），试图调整我创建的部分。我有一个主<section>，并且坐在其他几个嵌套的<section>和<aside>中。我试图将<aside>放到页面的右侧，同时保持在彩色边框内。附上的图片展示了我的目标。

我已尝试使用float:left＆amp;对于我的CSS表格中的float:right和aside部分"blogcontainer"，以及暂时尝试float:right，但我没有得到我想要的内容。我设法将它放在一边，我想要它，但这与我的主<section>混淆了。有人可以帮忙吗？ ＆＃39; intention.png＆＃39;是我的拍摄。代码如下。非常感谢。

的index.php：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="myStyle2.css" type="text/css" media="screen" />
    <title>Page Title</title>

    <!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>
<body>
    <!--Page header goes here-->
    <section id="top">
        <header>
            <!--Logo here -->
        </header>

        <!--Navigation Menu here -->
        <nav>
            <?php include('menu.php'); ?>
        </nav>
    </section>

    <section id="main">
        <section id="blogcontainer">

            <section id="blogpost">
                <article>
                    <header>
                        <h2>Blog Post Title Here</h2>
                    </header>
                    <p>Blog post contents here</p>
                <article>
            </section>



            <section id="comments">
                <article>
                    <header>
                        <h2>Comment Title 1</h2>
                    </header>
                    <p>Comment content 1</p>
                </article>
                <article>
                    <header>
                        <h2>Comment Title 2</h2>
                    </header>
                    <p>Comment content 2</p>
                </article>
                <article>
                    <header>
                        <h2>Comment Title 3</h2>
                    </header>
                    <p>Comment content 3</p>
                </article>
            </section>

            <section id="commentsform">

                <form action="#" method="post">
                    <h3>Post a comment</h3>
                    <p>
                        <label for="name">Name:</label>
                        <input name="name" id="name" type="text" required />
                    </p>
                    <p>
                        <label for="email">E-mail:</label>
                        <input name="email" id="email" type="email" required />
                    </p>
                    <p>
                        <label for="website">Website:</label>
                        <input name="website" id="website" type="url" />
                    </p>
                    <p>
                        <label for="comment">Comment:</label>
                        <textarea name="comment" id="comment" required></textarea>
                    </p>
                </form>
            </section>

        </section>

        <aside id="rightaside">
                <section>
                    <header>
                        <h3>Recent Posts</h3>
                    </header>
                    <ul>
                        <li><a href="#">Post 1</a></li>
                        <li><a href="#">Post 2</a></li>
                        <li><a href="#">Post 3</a></li>
                        <li><a href="#">Post 4</a></li>
                    </ul>
                </section>

                <section>
                    <header>
                        <h3>Recommended Sites</h3>
                    </header>
                    <ul>
                        <li><a href="http://www.stackoverflow.com">StackOverflow.Com</a></li>
                    </ul>
                </section>
            </aside>

    </section>

    <footer>

    </footer>

</body>
</html>

CSS：

/* Makeshift CSS Reset */
{
    margin: 0;
    padding: 0;
}

/* Tell the browser to render HTML 5 elements as block. Add more tags as needed. */
header, footer, aside, nav, article {
    display: block;
}

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

nav {
    margin: 1%;
    padding: 1%;
    border: 5px solid purple;
}

nav li {
    display: inline;
}

#main {
    margin: 1%;
    padding: 1%;
    border: 5px solid black;
}

#blogcontainer {
    width: 60%;
    margin: 1%;
    padding: 1%;
    border: 5px solid gold;
}

#blogpost {

    margin: 1%;
    padding: 1%;
    border: 5px solid green;
}
#comments {
    margin: 1%;
    padding: 1%;
    border: 5px solid grey;
}

#comments  > article  {
    margin: 1%;
    padding: 1%;
    border: 5px solid red;
}

#commentsform {
    margin: 1%;
    padding: 1%;
    border: 5px solid yellow;
}

#rightaside {
    float: right;
    width: 20%;
    margin: 1%;
    padding: 1%;
    border: 5px solid blue;
}

float: left and floar:right

float: right 这是下面的目的。以上是不利结果。 intended result

3 个答案:

答案 0 :(得分：1)

尝试使用此更新的css ..在多个地方更改了样式。

我在css中改变了什么

添加*，它是通用选择器，它会将所有元素边距和填充重置为0。

* {
   margin: 0;
   padding: 0;
 }

添加了 box-sizing：border-box; ，因为所有边框都会占用任何div或section中的exra像素。这将计算perticualar div的宽度

内的边框大小 
header, footer, aside, nav, article {
                display: block;
                box-sizing: border-box;
            }

并将overflow:auto添加到

#main {
                margin: 1%;
                padding: 1%;
                border: 5px solid black;
                overflow: auto;
            }

最后添加了float并显示：inline-block 

  #blogcontainer {
                width: 60%;
                margin: 1%;
                padding: 1%;
                border: 5px solid gold;
                float: left;
                display: inline-block;
            }


 /* Makeshift CSS Reset */
 * {
   margin: 0;
   padding: 0;
 }
 /* Tell the browser to render HTML 5 elements as block. Add more tags as needed. */
 header,
 footer,
 aside,
 nav,
 article {
   display: block;
   box-sizing: border-box;
 }
 img.displayed {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 nav {
   margin: 1%;
   padding: 1%;
   border: 5px solid purple;
 }
 nav li {
   display: inline;
 }
 #main {
   margin: 1%;
   padding: 1%;
   border: 5px solid black;
   overflow: auto;
 }
 #blogcontainer {
   width: 60%;
   margin: 1%;
   padding: 1%;
   border: 5px solid gold;
   float: left;
   display: inline-block;
 }
 #blogpost {
   margin: 1%;
   padding: 1%;
   border: 5px solid green;
 }
 #comments {
   margin: 1%;
   padding: 1%;
   border: 5px solid grey;
 }
 #comments > article {
   margin: 1%;
   padding: 1%;
   border: 5px solid red;
 }
 #commentsform {
   margin: 1%;
   padding: 1%;
   border: 5px solid yellow;
 }
 #rightaside {
   float: right;
   width: 20%;
   margin: 1%;
   padding: 1%;
   border: 5px solid blue;
 }
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="myStyle2.css" type="text/css" media="screen" />
  <title>Page Title</title>

  <!--[if lt IE 9]>
    
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

</head>

<body>
  <!--Page header goes here-->
  <section id="top">
    <header>
      <!--Logo here -->
    </header>

    <!--Navigation Menu here -->
    <nav>
      <?php include( 'menu.php'); ?>
    </nav>
  </section>

  <section id="main">
    <section id="blogcontainer">

      <section id="blogpost">
        <article>
          <header>
            <h2>Blog Post Title Here</h2>
          </header>
          <p>Blog post contents here</p>
          <article>
      </section>



      <section id="comments">
        <article>
          <header>
            <h2>Comment Title 1</h2>
          </header>
          <p>Comment content 1</p>
        </article>
        <article>
          <header>
            <h2>Comment Title 2</h2>
          </header>
          <p>Comment content 2</p>
        </article>
        <article>
          <header>
            <h2>Comment Title 3</h2>
          </header>
          <p>Comment content 3</p>
        </article>
      </section>

      <section id="commentsform">

        <form action="#" method="post">
          <h3>Post a comment</h3>
          <p>
            <label for="name">Name:</label>
            <input name="name" id="name" type="text" required />
          </p>
          <p>
            <label for="email">E-mail:</label>
            <input name="email" id="email" type="email" required />
          </p>
          <p>
            <label for="website">Website:</label>
            <input name="website" id="website" type="url" />
          </p>
          <p>
            <label for="comment">Comment:</label>
            <textarea name="comment" id="comment" required></textarea>
          </p>
        </form>
      </section>

    </section>

    <aside id="rightaside">
      <section>
        <header>
          <h3>Recent Posts</h3>
        </header>
        <ul>
          <li><a href="#">Post 1</a>
          </li>
          <li><a href="#">Post 2</a>
          </li>
          <li><a href="#">Post 3</a>
          </li>
          <li><a href="#">Post 4</a>
          </li>
        </ul>
      </section>

      <section>
        <header>
          <h3>Recommended Sites</h3>
        </header>
        <ul>
          <li><a href="http://www.stackoverflow.com">StackOverflow.Com</a>
          </li>
        </ul>
      </section>
    </aside>

  </section>

  <footer>

  </footer>

</body>

</html>

答案 1 :(得分：0)

你只需要向左浮动#blogcontainer。原因是，块元素将占用页面的整个宽度。浮动它会将其宽度折叠到其内容，允许旁边上升到您想要的位置。

要让#main包含元素，可以添加overflow:auto;目的是父元素不会展开以包含浮动元素。溢出表示元素应该扩展为包含溢出它的元素。

答案 2 :(得分：0)

它无效的原因是因为test$B没有浮动。 你有两个解决方案：

您可以在html中将#blogcontainer移到#rightaside之上，以便#blogcontainer可以填充左侧的可用空间。

要么将float：left规则添加到#blogcontainer，以便将两个容器从正常流中取出，问题是您的父容器会因其浮动子容器而崩溃。其中一个解决方案是将规则#blogcontainer添加到您的overflow: auto;容器中。

您可以在this post中了解浮动孩子的崩溃问题。

相关问题
最新问题