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