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

我不希望将我的class（聊天框）的div从div（容器）中推出。如何解决此问题？要在我的github中查看HTML和CSS，请执行以下操作：https://github.com/psychicspies/AccordianChallenge/tree/master/accordianchallenge

Answer 1

设置显示块将其清除。您可以做很多事情。

最快的解决方法，尝试“内联阻止”，
但是您仍然会面临难以管理的布局的问题，并且跨浏览器将值得您特别关注。

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

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

内部div（class：chatbox）从另一个外部div（class：container）中推出，因为另一个内部div的按钮设置为display：block

1 个答案: