Question

我对网页设计还不熟悉并且遇到了边距问题。当页面相当小时，事情起作用，但是当我增加宽度边距时，主列和右列之间出现。（红色和绿色）

这里是jsfiddle：https://jsfiddle.net/jcn2ds03/

这是我的css：

#container { 
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;


  overflow: hidden; 
  max-width: 50000px; 
  min-width: 500px; 
}

#container .inner { 
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;

  /* Dimensions */
  min-width:700px;
}

#right-column {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border-left: 5px solid #E3E3E3;


  float: right;
  width: 200px;
  height: 1000px;
  background: green;

}
#right-column h2 {
  text-align: center;

}
#right-column u1 {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;
}
#right-column li {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;

  text-align: center;
  list-style-type: none;
}

#main {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;

  /* Dimensions */
  width: 85%;
  min-width: 500px;
  height: 1000px;

  background: red;
}

#header {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;

  /* Dimensions */
  width: 100%;
  height: 300px;

  /* Colors */
  background-color: #EEEEEE;
}

#footer {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;

  height: 300px;
}

和html

<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="style2.css" />
  </head>
  <body>
    <div id="container">
      <div id="header">

      </div><!-- #header End -->
      <div class="inner">
        <div id="right-column">
          <h2><a href="">Main Link</h2>
          <u1>
            <li><a href="">link1</a></li>
            <li><a href="">link2</a></li>
            <li><a href="">link3</a></li>
            <li><a href="">link4</a></li>
          </u1>
        </div><!-- #right-column End -->
        <div id="main">

        </div><!-- #main End -->
      </div> <!-- .inner End -->
    </div> <!-- #Container End -->
    <div id="footer">

    </div> <!-- #footer End -->
  </body>
</html>

还有几张照片：

一切都好：http://gyazo.com/8bd7a80d9596e126f6477aec75c54f3e

太宽：http://gyazo.com/12fdaf65c69ff35d8ce721689f4ad235

Answer 1

摆脱width: 85%;中的#main。小提琴： https://jsfiddle.net/4fe8bkyf/

页面宽时出现边距

1 个答案: