页面结构未按预期排列

问题描述 投票：0回答：3

我在使用CSS（第一次体验）时遇到问题，试图使我创建的部分对齐。我有一个主<section>，并坐在其他几个嵌套的<section>和一个<aside>中。我试图将<aside>移到页面的右侧，同时保持在彩色边框内。随附的图片显示了即时消息的用途。

我已经尝试过将float:left和float:right用于CSS表单中的aside和"blogcontainer"部分，以及仅尝试float:right来使用，但没有达到我的预期。我设法搁置了我想要的东西，但是后来这与我的主菜单<section>混为一谈。有人可以帮忙吗？我正在拍摄“ intended.png”。下面的代码。非常感谢帮助。

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

“

“这是下面的目的。以上是不利结果。“预期结果”

html5 css3
3个回答
2
投票

您只需要向左浮动#blogcontainer。原因是，块元素将占据页面的整个宽度。浮动它的宽度会将其宽度压缩到其内容的大小，从而使一边可以上升到所需位置。

要使#main包含元素，请添加overflow:auto;。这样做的目的是父元素不会扩展为包含浮动元素。溢出表示元素应扩展为包含溢出元素。

1
投票

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

0
投票

之所以不起作用，是因为#blogcontainer没有浮动。您有两种解决方案：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.