Question

我正在尝试制作一个简单的页面，有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向下移动，并且我尝试的每个按钮都会发生这种情况。如果有人可以告诉我，这有什么问题并且可能在代码上发现一些错误会很好。

Answer 1

我把代码放在JSBin中。它看起来可以正常使用一个或多个按钮，这些更新应该有助于实现这一点。

所做的更改：

在display: flex中添加了flex-direction: column和#main个属性。我认为这就是你原本想要的.head。
添加.row以包装.content和.outcome。
重构了.content和.outcome CSS以组合类似的代码。除了使用%宽度而不是固定宽度以帮助响应之外。

这是完整的CSS：

* {
  box-sizing: border-box;
}

#main {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.head {
  width: 100%;
  height: 100px;
  margin: 50px auto 35px;
  border: solid 1px;
  border-radius: 25px;
  text-align: center;
  line-height: normal;
  justify-content: center;
  align-content: center;
  flex-direction:column;
}

.row {
  display: flex;
  flex-direction: row;
}

.content,
.outcome {
  height: 600px;
  border: solid 1px;
  border-radius: 10px;
}

.content {
  width: 33%;
  margin: 0 30px 0 0;
}

.outcome {
  width: 66%;
}

http://jsbin.com/kihojed/edit?html,css,output

Answer 2

您可以将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

这是您的ans：Why is this inline-block element pushed downward?

这可能对你有帮助！

需要解决方案与div内的按钮

2 个答案: