Question

我对CSS和编码一般都很陌生，很抱歉，如果很明显我不知道我在说什么。我使用CSS构建了一个3列的网站，它很大程度上依赖于＆＃39; float＆＃39;左列和右列的属性。但是，我认为由于这个原因，每当放大或缩小页面时，事情都会严重失真。

这是PHP：

<!DOCTYPE html>
<html>
<head>
<title>Gang Fight Collective</title>
<link href="/style.css" rel="stylesheet">
</head>
<body>

<!-- HEADER -->

<div id="header">
<a href="/"><img src="/img/misc/pokebattle300.jpg" alt="logo"></a><p>
</div>

<!-- LATEST UPDATE -->

<div id="parent">  
  <div id="update-left">latest update:</div>
  <div id="colwrap">
      <div id="update-right"><b>1/05/16</b></div>  
    </div>
</div>

<!-- BODY -->

<div id="biggysmalls">  
  <div id="leftside"><a href="#">Blog</a> <p><a href="#">Contact</a> <p><a href="/wp">SBboard Archive</a> <p> <a href="/sbboard">Top Secret</a></div>
  <div id="colwrap">
      <div id="rightside">RSS Feed <p> <a href="#">Significant Project</a> <p> <a href="#">Significant Project</a></div>
      <div id="main"><a href="#latestproject"><img src="/img/site/transparent.png" height="460px" width="650px"></a></div>  
    </div>
</div>


<!-- ARCHIVE -->

<p> 
<div id="arch">
<b><u>former projects</u></b><br>
Archive Here
</div> 

<!-- FOOTER -->

<p>
<div id="footer">&#169; 2016 <img src="/img/sbboard/paul_sig.png" alt="Colin Buffum">
</div>

</body>
</html>

这里是CSS：

a:link
{
    color: #e00;
    text-decoration: none;
}

a:visited
{
    color: #e00;
    text-decoration: none;
}

a:hover
{
    text-decoration: underline;
}

body
{
    font-family: "Courier New", Courier, monospace;
font-size:1em;
  margin: 0px;
  padding: 0px;
}

html{ font-size:100%; }

/* Header and Logo */

#header {
    text-align:center;   
}

/* The Update Bar */

#update-left {
  float: left;
}

#update-right {
text-align: right;
  float: right;
}

#parent {
    margin-left: auto;
    margin-right: auto;
  height: 18px;
width: 580px;
}

#colwrap{overflow:hidden; }

/* You Know What It Is */

#biggysmalls { 
width: 950px;
    margin-left: auto;
    margin-right: auto;}

/* Left Sidebar */

#leftside { 
 text-align: center;
width: 150px;
  float: left;
}


/* Right Sidebar */

#rightside {  
width: 150px;
  float: right;
    text-align:center;
} 


/* The Big Image */

#main { 
width: 650px;
    background-image: url("/img/site/filler/silk1.jpg");

    background-size: 100% auto;
    background-position: center; 

    -webkit-border-radius: 48px; font-size: 0;  -moz-border-radius: 48px;   border-radius: 48px;
}



/* Archive */

#arch {    
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    text-align:center}

/* Footer */

#footer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align:center        
}

感谢您查看!!

CSS 3列网站，缩放扭曲布局

0 个答案: