如何定位两个 <div>？ bootstrap 模态框的左边一个，右边一个？

Question

让我们在模态的 body 中有一个 bootstrap 模态。我有两个 <div>，左边的 <div> 包含图像，而右边的 <div> 包含图像的标题。

目标输出！

我们假设这是一个 bootstrap 模态 body:

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

不要在意两个 div 之间的 space，我们假设它只是一个小的 space。所以问题是我怎样才能把两个 <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>？ bootstrap 模态框的左边一个，右边一个？

How can I position two <div>? One from the left and one from the right of a bootstrap modal?

html

css

twitter-bootstrap

divider

CSS