如何定位两个 <div>？一个从左侧和一个从引导模式的右侧？

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;，它将粘在其容器的右侧。