html - 如何定位两个 ？一个来自 Bootstrap 模式的左侧，一个来自右侧？

Question

让我们在模态主体中有一个 Bootstrap 模态。我有两个<div> <div>从左边开始包含图像，而 <div>从右边开始包含图像的标题。

目标输出!

让我们假设这是一个 Bootstrap 模态主体:

--------------            ----------------
|            |            |              |
|            |            |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

给它们一个宽度和 float 它们应该是一件简单的事情:

CSS

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

}

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

要使其更像您的示例，请将第二个更改为 float:right;，它会粘在其容器的右侧。