需要使用div内的按钮解决方案

我正在尝试制作一个简单的页面，其中有3个div，1是顶部div，代表页眉，其他2个与其他2个小间隔相邻。到目前为止好，这是我的代码看起来像：需要使用div内的按钮解决方案

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向下移动，并且它发生在我尝试的每个按钮上。如果有人能告诉我，那会有什么不好，也可能会在代码中发现一些错误。

来源

2017-01-16 Nighterance

对不起，我不完全理解这个问题。所以你想要所有3个块在一个单一的行？（添加按钮之前和之后） – leocreatini

继续操作，将您拥有的代码添加到Codepen或SO的代码编辑器中。我只是将它自己添加到Codepen，我无法复制您遇到的问题，所以我希望可以。 –

我添加了一个小提琴来玩弄任何感兴趣的代码。 https://jsfiddle.net/px2mw1ck/不能真正看到问题出在哪里？将宽度更改为％数量，但剩下的数量与原来一样。对我来说它看起来很好。 – deadfishli

您可以添加float:left的内容股利和float:right的结果股利。这将确保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?

这可以帮助你！

来源

2017-01-16 19:02:16 varunsinghal65

谢谢你们两位！ – Nighterance

很高兴能帮到您 – varunsinghal65

您能否接受帮助您的答案？ – varunsinghal65

我把代码放在JSBin中。它似乎与一个或多个按钮正常工作，这些更新应该有助于实现这一点。

所做的更改：在#main

新增display: flex和flex-direction: column性能。我想这就是你最初想要的.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

来源

2017-01-16 18:51:44 leocreatini

谢谢你们两位！ – Nighterance

当然可以！如果他们帮助我们，请投票给我们的答案 – leocreatini

我尝试了，但我无法。我没有理会这些要求。 – Nighterance

需要使用div内的按钮解决方案

回答

相关问题