1
我正在开发一个Web开发项目，并且遇到了一些麻烦，使得我的页面上的元素按照我想要的方式定位。在我的页面上，我有两列，另外两个框，一个用于资源，一个用于链接。我希望列并排显示，另外两个框在它们下面（这些框将堆叠在另一个之上）。由于我的CSS现在已经写好了，所以这两列是并排的，但是资源和链接框也都在这两列旁边。在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部分。为了以防万一，我只是继续贴上它。
我没有在我们的服务器上为这个特定类别的帐户，所以我不能发送链接到页面实际的样子，但希望这张图片可以。
我敢肯定，这是很简单的东西，我很想念，这是我第一次在一段HTML和CSS工作。任何指针将不胜感激。
你介意发布你的html吗？ – 2014-09-03 23:15:46
我编辑了包含html的帖子，对不起，我并没有想到要做到这一点。 – 2014-09-03 23:48:47