html - 带边框的容器内的 float 半径框

我试图在一个居中的容器中向左浮动一个圆 Angular 矩形(使用 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>

最佳答案

将 margin 0 设置为 id topcontent

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

see demo here

关于html - 带边框的容器内的 float 半径框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23278749/

html - 带边框的容器内的 float 半径框

上一篇：css - 计算高度和 child 边距的奇怪行为

下一篇：javascript - JQuery - 单击，通过重置禁用鼠标悬停