Question

我正在尝试将一个圆角矩形（使用CSS创建）左侧和另一个框放在一个居中的容器内。当我这样做时，左侧框不与左侧对齐，右侧框在组件上方流动。我已经尝试了一百万件事，但我对CSS来说太新了以解决这个问题......

这是我的代码：

#container {
  overflow:hidden;
  width: 100%;
  max-width:960px;
  background-color: #FFFFFF;
  margin-left:auto;
  margin-right:auto;
}

#branding {
  width:100%;
  height:100px;
  background-color:black;
  z-align:1000;
}

#logo {
  background-image:url("images/google-logo-small.png");
  height:69px;
  width:200px;
  margin:15px 0 0 10px;
  float:left;
  z-align:1001;
}

#toparea {
  margin:20px 0px 0 0;
  float:right;
  color:white;
  z-align:1001;
}

#toparea ul li {
  list-style:none;
  display:inline-block;
  padding:0 30px 20px 0;
}

#topcontent {
  width:100%;
  height: 300px;
  background-color:inherit;
  margin:10px 0px 0px 10px;
  z-align:1000;
}

#blockone {
  -moz-border-radius: 0px 10px 5px 10px;
  border-radius: 15px;
  width:45%;
  height:200px;
  background-color:gray;
  float:left;
  border-width:1px;
  border-color:black;
  margin: 10px 0 0 0;
}

#blockone p {
  font-size:20px;
  color: white;
  padding:20px 0 0 20px;
}

#blocktwo {
  -moz-border-radius: 5px 0px 5px 10px;
  border-radius: 15px;
  width:45%;
  height:200px;
  float:right;
  background-color:gray;
  border-width:1px;
  border-color:black;
  margin:10px 0 0 0;
}

#blocktwo p {
  font-size:20px;
  color: white;
  padding:20px 0 0 20px;
}

#footer {
  clear:both;
  -moz-border-radius: 5px 10px 5px 10px;
  border-radius: 15px;
  width:100%;
  height:200px;
  background-color:gray;
  border-width:1px;
  border-color:black;
}

<!DOCTYPE html>
<html>
<head>
</head>

<body>
  <div id="container">
    <div id="branding">
      <div id="logo"></div>
      <div id="toparea">
        <ul>
          <li>Content</li>
          <li>Content2</li>
        </ul>
      </div>

    </div>

    <div id="topcontent">
          <div id="blockone">
          <table>
            <tr><td>field</td><td input="textbox" /></tr>
            <tr>
          </table>
          </div>

          <div id="blocktwo">
          <p>this is more text</p></div>
          </div>
      <div id="footer">Some more copy</div>
    </div>

  </div>
</body>

</html>

Answer 1

将边距0设置为id topcontent

#topcontent {
width:100%;
height: 300px;
background-color:inherit;
margin:0;
z-align:1000;
}

see demo here

在有边界的容器内浮动半径框

1 个答案: