Question

我正在开发一个Web开发项目，但是在我的页面上按照我想要的方式定位元素时遇到了一些麻烦。在我的页面上，我有两列，另外两个框，一个用于资源，一个用于链接。我希望列并排显示，而另外两个框位于它们下方（这些框将一个堆叠在另一个之上）。正如我现在编写的CSS，这两列是并排的，但是资源和链接框也都在这两列之外。

这是我的CSS：

#zen-summary {
    text-align: center;
    background-color: red;
    color: white;
    border: 10px double white;
}

#start-id {
    background-color: white;
    color: purple;
    text-align: center;
    width: 400px;
    border: 10px double purple;
    display: block;
    float: left;
}

#good-id {
    background-color: white;
    color: purple;
    text-align: center;
    width: 400px;
    border: 10px double purple;
    display: block;
    float: left;
}

h3.occasion {
    background-color: red;
    color: white;
    text-align: center;
    border: 10px double white;
}

#design-selection {
    list-style-position: inside;
    text-align: center;
    background-color: white;
    border: 10px double red;
}

h3.animals {
    background-color: red;
    color: white;
    text-align: center;
    border: 10px double white;
}

#zen-resources {
    list-style-position: inside;
    text-align: center;
    background-color: white;
    color: purple;
    border: 10px double red;
}

这是我的html，但是这个项目的说明声明我不允许以任何方式更改html，我只允许使用CSS。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CS 351 - Project 1</title>

    <link rel="stylesheet" href="style.css">




</head>



<body id="css-zen-garden">


    <section class="intro-start" id="start-intro-id">
        <header role="bannerRocks">
            <h1>CS 351 Rocks</h1>
            <h2>351 is a really great thing!</h2>
        </header>

        <div class="summaryDivision" id="zen-summary" role="article">
            <p>There are many ways that it is great.<a href="/examples/style.css" title="This page's sample CSS, the file you may modify."></a></p>
        </div>

        <div class="start" id="start-id" role="article">
            <h3>The Road to Enlightenment</h3>
            <p>To be, or not to be: that is the question". - (Act                            III, Scene I).</p>
            <p>"Neither a borrower nor a lender be; For loan oft loses                            both itself and friend, and borrowing dulls the edge                            of husbandry". - (Act I, Scene III).</p>
            <p>"This above all: to thine own self be true". - (Act                            I, Scene III).</p>
            <p>"Though this be madness, yet there is method in 't.".                            - (Act II, Scene II). </p>
            <p>"That it should come to this!". - (Act I, Scene II). </p>
            <p>"There is nothing either good or bad, but thinking                            makes it so". - (Act II, Scene II). </p>
            <p>"What a piece of work is man! how noble in reason!                            how infinite in faculty! in form and moving how express                            and admirable! in action how like an angel! in apprehension                            how like a god! the beauty of the world, the paragon                            of animals! ". - (Act II, Scene II).</p>
            <p>"The lady doth protest too much, methinks". - (Act                            III, Scene II). </p>
            <p>"In my mind's eye". - (Act I, Scene II).</p>
            <p>"A little more than kin, and less than kind". - (Act                            I, Scene II).</p>
            <p>"The play 's the thing wherein I'll catch the conscience                            of the king". - (Act II, Scene II). </p>
            <p>"And it must follow, as the night the day, thou canst                            not then be false to any man". - (Act I, Scene III)."This                            is the very ecstasy of love". - (Act II, Scene I).</p>
            <p>"Brevity is the soul of wit". - (Act II, Scene II).</p>
            <p>"Doubt that the sun doth move, doubt truth to be a                            liar, but never doubt I love". - (Act II, Scene II).</p>
            <p>"Rich gifts wax poor when givers prove unkind". - (Act                            III, Scene I).</p>
            <p>"Do you think I am easier to be played on than a pipe?"                            - (Act III, Scene II).</p>
            <p>"I will speak daggers to her, but use none". - (Act                            III, Scene II).</p>
            <p>"When sorrows come, they come not single spies, but                            in battalions". - (Act IV, Scene V).</p>
        </div>
    </section>

    <div class="bad inbetween" id="good-supporting" role="main">
        <div class="good" id="good-id" role="article">
            <h3>Make it good.</h3>
            <p>"Now is the winter of our discontent". - (Act I, Scene                            I). </p>
            <p>"A horse! a horse! my kingdom for a horse!". - (Act                            V, Scene IV). </p>
            <p>"Conscience is but a word that cowards use, devised                            at first to keep the strong in awe". - (Act V, Scene                            III).</p>
            <p>"So wise so young, they say, do never live long". -                            (Act III, Scene I). </p>
            <p>"Off with his head!" - (Act III, Scene IV). </p>
            <p>"An honest tale speeds best, being plainly told". -                            (Act IV, Scene IV). </p>
            <p>"The king's name is a tower of strength". - (Act V,                            Scene III). </p>
            <p>"The world is grown so bad, that wrens make prey where                            eagles dare not perch". - (Act I, Scene III).</p>
        </div>






    <aside class="sidebar" role="complementary">
        <div class="wrapper">

            <div class="design-selection" id="design-selection">
                <h3 class="occasion">On the occasion...:</h3>
                <nav role="navigation">
                    <ul>
                    <li>
                      <a href="http://cnn.com" class="design-name">Caesar</a></li>
                    <li><a href="http://sfasu.edu">SFA</a></li>
                    <li><a href="http://cosm.sfasu.edu">COSM</a>
                      </li>
                    </ul>
                </nav>
            </div>

            <div class="zen-resources" id="zen-resources">
                <h3 class="animals">Resources:</h3>
                <ul>
                    <li class="view-css">
                    Cats</li>
                  <li class="view-css">Dogs</li>
                  <li class="view-css">Elephants</li>
                    <li class="view-css">Rhinos<a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page."></a>
                  </li>
                </ul>
            </div>
        </div>
    </aside>


</div>

<!--

    These superfluous divs/spans were originally provided as catch-alls to add extra imagery.
    These days we have full ::before and ::after support, favour using those instead.
    These only remain for historical design compatibility. They might go away one day.

-->
<div class="extra1" role="presentation"></div><div class="extra2" role="presentation"></div><div class="extra3" role="presentation"></div>
<div class="extra4" role="presentation"></div><div class="extra5" role="presentation"></div><div class="extra6" role="presentation"></div>

</body>
</html>

我很确定我对本问题所关注的CSS的唯一部分是#start-id，#good-id，#design-selection和#zen-resources部分。我只是继续并粘贴所有这些以防万一。

我的服务器上没有这个特定类的帐号，所以我无法发送一个链接到页面的实际外观，但希望这张照片可以用。

enter image description here

我确信这是一件非常简单的事情，我很遗憾，这是我第一次使用HTML和CSS。任何指针都将非常感激。

Answer 1

您需要在clear the float列之间添加MDN on floats。添加clear:left;或clear:both;您要显示在前两列下方的第一个元素。

Answer 2

我们可以将两个不符合<div style="display: table"的方框包装起来来解决这个问题。

如果没有让我从头开始使用HTML，以下内容可以帮助您：

DEMO

HTML：

<div>
    <div>a</div>
    <div>b</div>
</div>
<div style="display: table">
    <div>c</div>
    <div>d</div>
</div>

CSS：

div {
    display: inline-block;
    border: 1px solid #333;
    margin: 1em;
}

在CSS中定位页面部分

2 个答案: