-3
我正在一個有液體佈局設計和三列的網站上工作。三列左移，每個列都有1px的邊界。當我調整頁面大小時，除了列周圍的邊框之外，所有內容都會調整。文本只是在邊界之外溢出。有什麼辦法可以防止這種情況發生？邊界和液體佈局
<head>
<title>Liquid Layout</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<style type="text/css">
* {
margin: 0px 0px;
padding: 0px 0px;
}
/* MAIN WRAPPER */
#wrapper {
width: 90%;
margin-right: auto;
margin-left: auto;
}
@font-face {
font-family: 'Andika';
src: url('AndBasR-webfont.eot');
src: url('AndBasR-webfont.eot?#iefix') format('embedded-opentype'),
url('AndBasR-webfont.woff') format('woff'),
url('AndBasR-webfont.ttf') format('truetype'),
url('AndBasR-webfont.svg#AndikaBasicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* BODY */
body {
background-image: url(gold.jpg);
background-repeat: repeat;
}
/* HEADER */
#header {
background-color: #A60000;
}
#header img {
float: left;
}
#title {
float: left;
width: 60.95%;
height: 240px;
font-family: Copperplate Gothic Light, sans-serif;
background-color: #A60000;
color: #FFFFFF;
font-weight: bold;
text-transform: uppercase;
text-align: center;
font-size: 4em;
letter-spacing: 3px;
line-height: 75px;
padding: .5em 0em 0em 0em;
}
.slogan {
height: 50px;
font-family: Copperplate Gothic Light, sans-serif;
background-color: #A60000;
color: #EBC137;
font-size: .25em;
text-align: center;
letter-spacing: 3px;
}
hr.break {
//padding: .1em 0em 0em 0em;
}
/* NAVIGATION */
#nav {
float: left;
width: 60.95%;
height: 56px;
padding: 0em 0em;
background-color: #A60000;
overflow: hidden;
}
#nav ul {
padding: 0em 0em;
list-style-type: none;
margin-left: 3.4em;
}
#nav li {
text-align: center;
float: left;
//width: 170px;
}
#nav a {
color: #FFFFFF;
display: block;
text-decoration: none;
letter-spacing: 4px;
line-height: 50px;
font-size: 1.5em;
text-transform: uppercase;
font-family: Copperplate Gothic Light, sans-serif;
padding: 0px 50px 0px 0px;
}
#nav a:hover {
color: #3CA0D0;
}
#main {
float: left;
width: 100%;
background-color: #3CA0D0;
}
/* PLAYER OF THE WEEK */
#featured {
clear: both;
float: left;
margin-top: 1em;
margin-right: 1em;
margin-bottom: .5em;
margin-left: 1.5em;
border: 3px solid #A60000;
width: 27%;
//height: 605px;
}
#featured img {
float: left;
padding: .5em .5em .5em .5em;
}
#featured ul {
list-style: none;
padding: .5em .5em 0em 0em;
}
#featured li {
font-family: Georgia, Serif;
letter-spacing: .05em;
line-height: 1.5em;
color: #000044;
}
#featured_main {
clear: both;
padding: 0em .5em .5em .5em;
text-align: justify;
font-family: Georgia, Serif;
letter-spacing: .05em;
line-height: 1.3em;
color: #000044;
}
/* LATEST NEWS */
#news {
float: left;
margin-top: 1em;
margin-right: 1em;
margin-bottom: .5em;
border: 3px solid #A60000;
width: 27%;
//height: 605px;
}
h1.videos {
padding: .5em .5em 0em .5em;
font-size: 1em;
font-family: Tahoma, Geneva, sans-serif;
letter-spacing: 1px;
color: #000044;
}
p.morgan, p.pia, p.gold {
padding: .5em .5em 0em .5em;
overflow: hidden;
font-family: Andika;
letter-spacing: .05em;
line-height: 1.3em;
color: #000044;
text-align: justify;
}
a:link {
font-size: 1em;
color: #000044;
}
a:visited {
color: #000044;
}
/* MULTIMEDIA VIDEOS */
#videos {
float: left;
margin-top: 1em;
margin-right: 1em;
margin-bottom: .5em;
border: 3px solid #A60000;
width: 38%;
//height: 605px;
}
#videos_inner {
text-align: center;
}
p.title {
padding: .5em 0em 1em 0em;
font-family: Tahoma, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
letter-spacing: 2px;
}
/* FOOTER */
#footer {
clear: both;
background-color: #A60000;
}
#footer_inner {
text-align: center;
padding: .3em;
color: #FFFFFF;
font-family: Copperplate/Copperplate Gothic Light, sans-serif;
font-size: 15px;
}
#footer a:link {
font-family: Copperplate/Copperplate Gothic Light, sans-serif;
color: #FFFFFF;
font-size: 15px;
}
#footer a:hover {
color: #FFFFFF;
font-size: 18px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="celebrate4.jpg" alt="US Women's National Team" />
</div> <!--end div header -->
<div id="title">
U.S. Women's
National Team
<p class="slogan">Greatness Has Been Found</p>
</div> <!--end div title-->
<hr class="break">
<div id="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="http://www.ussoccer.com/Teams/US-Women/Rosters/120527-Olympic-Roster.aspx">Roster</a></li>
<li><a href="http://www.ussoccer.com/Teams/US-Women/Schedule-Results/2012.aspx">Schedule</a></li>
<li><a href="http://www.ussoccerstore.com/">Store</a></li>
</ul>
</div> <!--end div nav -->
</div> <!--end div wrapper -->
<div id="wrapper">
<div id="main">
<div id="featured">
<img src="abby.png" alt="Abby Wambach, Forward" />
<ul>
<li><b>Name:</b> Abby Wambach </li>
<li><b>DOB:</b> June 2, 1980 </li>
<li><b>Position:</b> Forward </li>
<li><b>Appearances:</b> 191 </li>
<li><b>Goals:</b> 146 </li>
<li><b>Hometown:</b> Rochester, NY </li>
</ul>
<div id="featured_main">
<p> One of the world's best players in the air, Wambach is the second all-time leading scorer in international soccer history behind only Mia Hamm (158). Wambach surpassed former U.S. WNT teammate Kristine Lilly (130) earlier in 2012 to move into second place. She has 141 goals through the group stage of the 2012 London Olympics. Wambach is a five-time U.S. Soccer Female Athlete of the Year, most recently recognized for her 2011 campaign that included eight goals and four assists. Her ability to wear down defenses with her physical play, aerial game and hard running has long been a key to the USA's success. Has developed into one of the most dangerous goal scorers in the world since debuting for the USA in 2001. Has the best goals per game ratio in U.S. history, having scored 125 goals in her 166 games through the end of 2011. Of her 125 goals, 51 have come with her head.</p>
</div> <!--end div featured_main -->
</div> <!--end div featured -->
<div id="news">
<div id="new_inner">
<h1 class="videos"><a href="http://www.womenssoccerunited.com/profiles/blogs/alex-morgan-wins-sportswoman-of-the-year-award">Alex Morgan Named Team Sports Woman of the Year</a></h1>
<p class="gold">USWNT forward Alex Morgan was awarded the Sportswoman of the Year Award (Team Sport) last night at the 33rd Salute to Women in Sports Gala in New York. The prestigious award was given to Alex Morgan for her exceptional performances in a team sport over a 12 month span...</p>
<h1 class="videos"><a href="http://www.ussoccer.com/News/Womens-National-Team/2012/08/Pia-Sundhage-to-Return-Home-to-Pursue-Opportunities-in-Sweden.aspx">Head Coach Pia Sundhage Resigns</a></h1>
<p class="pia">U.S. Women's National Team head coach Pia Sundhage has decided to return home to pursue opportunities in Sweden. "After the Olympics we had discussions and early in the process it became clear that Pia was very interested in returning home to Sweden," said U.S. Soccer President Sunil Gulati. "It certainly wasn't an easy decision for U.S. Soccer or Pia. She deserves a tremendous amount of credit for the amazing success with the U.S. Women's National Team...</p>
<h1 class="videos"><a href="http://www.ussoccer.com/News/Womens-National-Team/2012/08/US-WNT-vs-Japan-Gold-Medal-Match.aspx">U.S. Women Win Fourth Olympic Gold</a></h1>
</div> <!--end div news_inner -->
<p class="gold">The U.S. Women's National Team captured the gold medal at the 2012 London Olympics with a 2-1 victory against Japan. U.S. midfielder Carli Lloyd, the gold medal hero of the 2008 Olympics, led the way once again with both goals for the United States as they upended 2011 FIFA Women's World Cup champion Japan and captured their third-consecutive Olympic championship...</p>
</div> <!--end div news -->
<div id="videos">
<div id="videos_inner">
<p class="title">Multimedia Highlights</p>
<iframe width="450" height="253" src="http://www.youtube.com/embed/Nd3udbFc5tw" frameborder="0" allowfullscreen></iframe> <br /> <br />
<iframe width="450" height="253" src="http://www.youtube.com/embed/7a4rNNXOOjY" frameborder="0" allowfullscreen></iframe>
</div> <!--end div videos_inner -->
</div> <!--end div videos -->
</div>
</div> <!--end div wrapper -->
<div id="wrapper">
<div id="footer">
<div id="footer_inner">
For more information about the U.S. Women's National Team, contact <a href="mailto:[email protected]">Michelle McCullough</a>.
</div><!--end div footer_inner-->
</div><!--end div footer-->
</div> <!--end wrapper div -->
</body>
發佈您的代碼的簡化版本，並把它的jsfiddle。 – bookcasey