html - 内部 div(类 :chatbox) pushed out of outer div(class:container) because of another inner div which has buttons set to display:block

Question

我的 HTML:

<div class="container">
        <div class="buttons-and-divs">
            <button>Accordion Top</button>
            <div>Are you</div>
            <button>Accordion Middle</button>
            <div>up for</div>
            <button>Accordion Bottom</button>
            <div>the challenge?</div>
        </div><!--end buttons-and-divs-->
        <div class="div-chatbox">
            <div>Chatbox</div>
            <div>
                <input type="text" name="">
            </div>
            <div>
                <button></button>
                <button></button>
            </div>
        </div><!--end chatbox-->
    </div><!--end container-->

我的 CSS:

div.buttons-and-divs button { 
    display: block;
    width: 300px;
    height: 50px; 
}

.div-chatbox {
    float: right;
}

我已经为按钮设置了 display:block，因为我希望它们相互堆叠。我的问题的图片在这里:View in Browser

我不希望我的类(聊天框)的 div 被推出 div(容器)。我该如何解决这个问题？在我的 github 中查看 HTML 和 CSS:https://github.com/psychicspies/AccordianChallenge/tree/master/accordianchallenge

Answer 1

设置显示 block 将导致它们清除。您可以做很多事情。

最快的修复，尝试“inline-block”，
但您仍然会遇到难以管理的布局，跨浏览器需要格外注意。

但考虑一下:
CSS flex
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS 网格
https://css-tricks.com/snippets/css/complete-guide-grid/