需要使用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內的按鈕解決方案

回答

相關問題