我想做一个简单的页面，有 3 个 div，1 个是顶部 div，作为标题， 其他 2 个彼此相邻，间隙很小。到目前为止一切顺利，这就是我的代码的样子:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="main">
<div class="head">GIMP & Inscape galerija</div>
<div class="content"><button>Test</button></div>
<div class="outcome">Here is the outcome, that will come, when i will press buttons</div>
</div>
</body>
</html>
和CSS
body {
background-image: url("../img/background.jpg");
background-repeat: no-repeat;
}
#main {
width: 1400px;
margin: 0 auto;
position: relative;
}
.head {
width: 1400px;
height: 100px;
margin: 0 auto;
border: solid 1px;
border-radius: 25px;
text-align: center;
line-height: normal;
display: flex;
justify-content:center;
align-content:center;
flex-direction:column;
margin-top: 50px;
}
.content {
width: 350px;
margin: 0 auto;
height: 600px;
border: solid 1px;
margin: 35px 0px 0px 0px;
border-radius: 10px;
display: inline-block;
}
.outcome {
width: 991px;
height: 600px;
border: solid 1px;
margin: 0 auto;
margin-left:50px;
border-radius: 10px;
display: inline-block;
}
在我添加任何按钮之前，没关系，一切都按预期排列。当我添加按钮时，我的结果 div 向下移动，我尝试的每个按钮都会发生这种情况。如果有人能告诉我这有什么问题，并且可能会发现代码中的一些错误，那就太好了。
最佳答案
您可以将 float:left 添加到内容 div 并将 float:right 添加到结果 div。这将确保 div 不会下降。
.content {
width: 350px;
margin: 0 auto;
height: 600px;
border: solid 1px;
margin: 35px 0px 0px 0px;
border-radius: 10px;
float:left; //Added this
}
.outcome {
width: 991px;
height: 600px;
border: solid 1px;
margin: 0 auto;
border-radius: 10px;
float:right; //Added this
margin-top:35px; //Added this to bring outcome div at same height
}
https://jsfiddle.net/varunsinghal65/e8t79jby/#&togetherjs=EwUt1Vdnd8
这是你的答案:Why is this inline-block element pushed downward?
这可能对你有帮助!
关于html - 需要在 div 中使用按钮的解决方案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41682845/