Question

让我在模态的主体中有一个自举模态。我有两个<div>左侧的<div>包含图像，而右侧的<div>包含图像的标题。

目标输出！

我们假设这是一个自举模式体：

--------------            ----------------
|            |            |              |
|            |            |Name:         |
|  <image>   |            |Description:  |
|            |            |Price:        |
|            |            |              |
--------------            ----------------

没关系两个div之间的空间，让我们假设它只是一个小空间。所以问题是如何将两个<div>放在同一个路线中，其中第一个<div>位于左侧，另一个位于右侧？

截至目前，这就是我所做的。

---------------
|             |
|             |
| <image>     |
|             |
|             |
---------------

---------------
|             |
|             |
|Name:        |
|Description: |
|Price:       |
|             |
---------------

另一个<div>向下移动到右边。

这是我上面错误输出的代码。

CSS

#divforimg{
    position: left;

}

#divforinfo {
    position: right;
}

HTML

            <div class="modal-body">

                    <div id = 'divforimg'>
                    <img style="height:50%; width:50%;" id = 'appimage'>
                    </div>

                <div id = "divforinfo">
                    <i><p id = "appdesc"></p></i>
                    <strong>Price: </strong><label id = "appprice"></label><br>
                    <strong>Brand: </strong><label id = "appbrand"></label><br>
                    <strong>Color: </strong><label id = "appcolor"></label><br>
                    <strong>Model: </strong><label id = "appmodel"></label><br>
                    <strong>Available Quantity: </strong><label id = "appqty"></label><br>
                    <strong>Date Posted: </strong><label id = "appposted"></label><br>
                </div>


        </div>

没关注上面的图像源，包括其他字段。谢谢！

Answer 1

应该是给它们宽度和浮动它们的简单问题：

CSS

#divforimg{
    width:200px;
    float:left;

}

#divforinfo {
    width:200px;
    float:left;
}

为了让它更像你的例子，将第二个更改为float:right;，它将粘贴到容器的右侧。

我如何定位两个<div>？一个来自左侧，一个来自右侧的自举模式？

1 个答案:

CSS