时间戳

首页 > 解决方案 > 内部 div(class:chatbox) 被推出外部 div(class:container) 因为另一个内部 div 的按钮设置为 display:block

html - 内部 div(class:chatbox) 被推出外部 div(class:container) 因为另一个内部 div 的按钮设置为 display:block

问题描述

我的 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，因为我希望它们相互堆叠。我的问题的图像在这里：在浏览器中查看

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

标签： htmlcss

解决方案

设置显示块将导致它们被清除。你可以做很多事情。

最快的修复，尝试“inline-block”，
但你仍然会留下难以管理的布局，跨浏览器将需要额外的关注。

但请考虑：
css flex
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

推荐阅读