Question

我需要一些帮助，我正在为学校设计的网页上有一些溢出的文字。我进入HTML / CSS网页设计课程已经两周了，所以我无法使用一些更高级的编码。我只是好奇为什么我的网站右侧的文字（我会在评论中发布一个链接到jsfiddle，因为我无法弄清楚如何在这个原始帖子中添加它。）不想留下在屏幕的一侧。有什么帮助吗？

这是我的代码（CCS和HMTL）：

@charset "utf-8";

/* temporary background color for testing purposes  */

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
el,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* My Styles */

body {
  font-family: Arial, Hevetical, sans-serif;
  font-size: 100%;
  background-color: blue;
  width: 80% margin: 0 auto;
}
header {
  padding: 3em;
  height: 330px;
  margin: 0;
  background-color: lightblue;
  position: relative;
}
nav {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: 1em;
}
nav a {
  padding: .25em 5em;
  background-color: #235B8A;
}
section {
  padding: 3em;
}
footer {
  padding: 3em;
  background-color: lightblue;
  text-align: center;
}
aside {
  padding: 3em;
  background-color: lightgrey;
}
h1,
h2,
h3 {
  padding-bottom: 1em;
}
h1 {
  font-size: 250%;
}
h1 a {
  text-decoration: none;
}
h2 {
  font-size: 150%;
}
h3 {
  font-size: 80%;
}
.container {
  overflow: hidden;
}
.col-1-3 {
  width: 32%;
  float: left;
  padding-bottom: 99999px;
  margin-bottom: -99999px;
}
.col-2-3 {
  width: 65% float: left;
}
.cleafix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  clear: both;
}

<title>Crystal Coast Theater</title>
<link href="CSS/css.css" rel="stylesheet" type="text/css">
<link href="../CSS/css.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header style="text-align:center">
    <a href="http://pbernhardt.mydevryportfolio.com/wgd232/index.html"><h1> Crystal Coast Theater.
</h1></a>
    <nav style="text-align:center">
      <a href="http://pbernhardt.mydevryportfolio.com/wgd232/index.html">Home</a>
      <a href="http://pbernhardt.mydevryportfolio.com/wgd232/event.html">Events</a>
      <a href="http://pbernhardt.mydevryportfolio.com/wgd232/ticket.html">Tickets</a>
      <a href="http://pbernhardt.mydevryportfolio.com/wgd232/contact.html">Contact us</a>
    </nav>
  </header>
  <div class="container cleatfix">
    <aside class="col-1-3">
      <h2>Upcoming events:</h2>
      <p><span class="emphasis">May 22&nbsp;&ndash;&nbsp;June 8:</span>&nbsp; Daring Last Days of Blackbeard</p>
      <p><span class="emphasis">June 11&nbsp;&ndash;&nbsp;June 29:</span>&nbsp; Ghost Stories of the Crystal Coast</p>
      <p><span class="emphasis">July 3&nbsp;&ndash;&nbsp;July 20:</span>&nbsp; Beach Rental</p>
      <p><span class="emphasis">July 23&nbsp;&ndash;&nbsp;August 10:</span>&nbsp; The Siege of Fort Macon</p>
    </aside>
    <section style="text-align:center" class="col-2-3">
      <h2>Your Down East Playhouse</h2>
      <p>The Crystal Coast Theater is located in downtown Moorehead City. It features local talent performing in both renowned plays and in works written by some of the Crystal Coast’s own talented playwrights.</p>
      <br>
      <p>The Crystal Coast Theater also offers educational performances that bring to life the history and culture of the 85 miles of coastline that are favorite destinations for tourists.</p>
      <br>
      <p>Check out our upcoming events and make plans to come and see one of our shows.</p>
    </section>
  </div>
  <footer style="text-align:center">
    <small>Copyright &copy; 2015 Paul Bernhardt Enterprises</small>
  </footer>
</body>

</html>

-dark_nemesis

Answer 1

这将解决它：

section {
    overflow: hidden;
    padding: 3em;
    position: relative;
}

格尔茨

在我的文字运行中喋喋不休

1 个答案: