Question

非常新的HTML / CSS / JavaScript / JQuery，我需要一些帮助。我试图让我的两个div嵌套在另一个div中，以便彼此保持紧密并随屏幕缩放。所以我使用宽度：50％;，但我还需要一个围绕两者的边框，这似乎增加了他们的宽度使得最右边的div向下移动。我尝试了table / table-cells方法，以及其他没有产生结果的解决方案，所以现在我发布了我的源代码，如果有人可以提供帮助，我将非常感激。

CSS：

body{
  background-color: black;;
}

#header{
  display: table;
  width:100%;
  height:30%;
  background-color: white;
  overflow: hidden;
}

.button1{
  display: table-cell;
  width: 50%;
  height: auto;
  background-color: red;
  border-radius: 120px 0px 0px 120px / 120px 0px 0px 120px;
  border-color: green;
  border-width: thin;
  border-collapse:collapse;
  border-style: bold;
  border-right-style: none;
  float:left;
  text-align: center;
  vertical-align: middle;
}

.button2{
  display: table-cell;
  width: 50%;
  height: auto;
  background-color: blue;
  border-radius: 0px 120px 120px 0px / 0px 120px 120px 0px;
  border-color: red;
  border-width: thin;;
  border-style: solid;
  border-left-style: none;
  float: right;
  text-align: center;
  vertical-align: middle;
}

HTML：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8"/>
  <title></title>
  <script src="script.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<div id="header">
  <div class="button1">Button1</div><div class="button2">Button2</div>
</div>
</body>

</html>

Answer 1

我假设.button1而.button2应该是.articles和.videos？

您所看到的是默认的盒子模型行为。要防止填充和边框超出指定的宽度，请在元素上使用box-sizing: border-box。

＆＃13;

body{
  background-color: black;;
}

#header{
  display: table;
  width:100%;
  height:30%;
  background-color: white;
  overflow: hidden;
}

.articles {
  display: table-cell;
  width: 50%;
  height: auto;
  background-color: red;
  border-radius: 120px 0px 0px 120px / 120px 0px 0px 120px;
  border-color: red;
  border-width: thin;
  border-collapse:collapse;
  border-style: solid;
  border-right-style: none;
  text-align: center;
  vertical-align: middle;
}

.videos {
  display: table-cell;
  width: 50%;
  height: auto;
  background-color: blue;
  border-radius: 0px 120px 120px 0px / 0px 120px 120px 0px;
  border-color: red;
  border-width: thin;;
  border-style: solid;
  border-left-style: none;
  text-align: center;
  vertical-align: middle;
}
#header > div {
  box-sizing: border-box;
}

＆＃13;

<div id="header">
  <div class="videos">Videos</div>
  <div class="articles">Articles</div>
</div>

＆＃13;

Answer 2

使用box-sizing: border-box;

.box1{
background-color:red;
border:5px solid #2d2d2d;
width:50%;
float:left;
box-sizing: border-box;
height:200px;
}
.box2{
background-color:green;
border:5px solid #2d2d2d;
width:50%;
float:left;
box-sizing: border-box;
height:200px;
}

<div class="box1">

</div>
<div class="box2">

</div>

使用边框样式使两个div保持彼此相邻并使用浏览器缩放

2 个答案: