Question

我正在开发一个具有弹出框供用户进行交互的项目。我试图在弹出框中将2块内容彼此相邻。我一直在寻找答案，但没有一个常见的解决方案似乎在这里工作。我试过浮动：左，显示：内联块等。唯一有用的是设置准确的宽度/高度并在第二个容器上应用边距，但我想避免这个黑客解决方案。

HTML：

<div id="equip-robot-modal" class="modal">

<div id="equip-robot-modal-content" class="modal-content">

    <div id="equip-modal-content-inner" class="modal-content-inner">

        <div id="robot-info-content">

            <header id="equip-header">

                <h2 id="equip-header-text">Robot Name Header</h2>

            </header>


        </div><!-- #robot-info-content -->

        <div id="inventory-list-content">

            <div id="inventory-list-container">

              <p>
                put more content here
              </p>

            </div><!-- #inventory-list-container -->

            <div id="auto-match-container">

                <button type="button" style="width: 50%; height: 50px; margin-top: 20px;" class="button">
                    <?php //echo langMatch(
                            //'PLAYER_SELECTOR_AUTO_MATCH'); ?>
                            Go to Store
                </button>

            </div><!-- #auto-match-container -->

        </div><!-- #inventory-list-content -->            

    </div><!-- #equip-modal-content-inner -->

</div><!-- #equip-robot-modal-content -->

CSS：

    #robot-info-content {
    min-width: 500px;
    padding: 10px;
    position: relative;
    float: left;
    background-color: red;
}

#robot-image {
    padding: 20px 0;
}

#modal-progress-bars {
    min-height: 75%;
}

#inventory-list-content {
    min-width: 400px;
    padding: 10px;
    display: inline-block;
    float: left;
    background-color: purple;
}

#inventory-list-container {
    width: 100%;
    height: 430px;
    border: 1px solid black;
    overflow-y: scroll;
}


.modal-content {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 350px;
    height: auto;
    transform: translate(-50%, -50%);
    background-color: #f7f7f7;
    color: black;
    border: 2px solid black;
    overflow: visible;
}

.modal-content-inner {
    margin: 20px 50px;
    text-align: center;
}

.modal-content-inner header {
    background-color: white;
    border: 1px solid black;
    padding: 10px 50px;
    margin: 0 auto;
}

请参阅小提琴：https://jsfiddle.net/kqa25wgv/

我想在模态内容内部div中浮动2个内容div。有什么建议吗？

Answer 1

以下是一些对我有用的价值观。我剥夺了所有多余的东西：

.modal-content {
    width: 800px;}

#robot-info-content {
    width: 50%;
    float: left;
    background-color: red;
}

#inventory-list-content {
    width: 50%;
    float: left;
    background-color: purple;
}

#inventory-list-container {
    height: 430px;
    border: 1px solid black;
}

.modal-content-inner {
    margin: 20px 50px;
    text-align: center;
}

.modal-content-inner header {
    background-color: white;
    border: 1px solid black;
}

您会注意到我将.modal-content类的宽度设置为800px。这是任意的，您可以将其更改为您想要的（或将其设置为包含div的百分比，如果您有的话）。重要的更改是使用宽度设置替换最小宽度设置，并将它们设置为百分比。你遇到的问题是你的两个内部div对于他们的容器太宽了，所以第二个包裹到下一行，可以这么说。

当然，如果在内容内容div上使用填充和/或边距，则无法在没有相同问题的情况下将其设置为50％。

您想要尝试的另一件事是将一个内容div浮动到左侧，将另一个放在右侧。如果你将它们都浮到左边，只要它们占据容器的整个宽度（并且不超过整个宽度），它就不会有所作为。当您开始为边距和填充使用静态值时，这可能会变得棘手，因此您需要进行实验。（您也可以将百分比值用于边距和填充，这可能不那么棘手。）

如何在内部div弹出中并排制作2个div？

1 个答案: