Html 将一个div浮动到另一个div的右侧

我很难让我的图像位于我试图显示的信息的右侧。我的CSS技能缺乏，而且越来越明显，因此非常感谢您的帮助

这是我的HTML

<div id="facility_general_info">
    <div id="facility_info">
        <h3>Facility Information</h3>
        <div id="facility_data">
            <ul>
                <li><b>Facility Number</b><p>...</p></li>
                <li><b>Facility Name</b><p>...</p></li>
                <li><b>Address</b><p>...</p></li>
                <li><b>City</b><p>...</p></li>
                <li><b>Province</b><p>...</p></li>
                <li><b>Postal Code</b><p>...</p></li>
                <li><b>Roof Area</b><p>...</p></li>
                <li><b>Roof Area Inspected</b><p>...</p></li>
                <li><b>Last Inspected</b><p>...</p></li>
                <li><b>Inspected By</b><p>...</p></li>
            <ul>
        </div>
        <!--facility front image-->
        <div id="facility_image">
            <div id="fac_image_wrapper">
                <img  src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250"/>
            </div>
            <br />
        </div>
    </div>
</div>

这是一本书

---

如何将图像浮动到要显示的数据的右侧？

使用

display:inline block

将图像与数据水平放置。删除图像的边距集，因为图像已在父容器中。为这两个元素指定一个

float:left

，因为数据在DOM中首先出现，所以图像将向右移动

#设施(一般信息){
填充物：5px；
浮动：左；
宽度：750px；
线高：110%；
}
#设施信息{
左边距：-40px；
列表样式类型：无；
}
#设施信息h3{
颜色：#0d55b7；
边框底部：2个实心#0d55b7；
}
#设施信息{
左边距：50像素；
宽度：750px；
浮动：左；/*添加*/
}
#设施数据{
宽度：375px；
边距：0！重要；
显示：内联块；/*添加*/
浮动：左；/*添加*/
}
/*设施形象*/
#设施图像{
宽度：350px；
填充物：5px；
浮动：左；
}
#fac_图像_包装器p{
宽度：250px；
}
#fac_图像_包装器{
文本对齐：居中；
}

设施信息

设施编号


设施名称


地址


城市


省


邮政编码


屋顶面积


屋宇署检查屋宇面积


上次检查


检查人

您正在为图像div设置一个巨大的边距，使其在屏幕上显示

让

#facility_data

占据容器div的60%并向左浮动，让图像占据其余37%并删除边距。您还需要为

#facility_data

留出一些余量，以便在两个分区之间保留一些空间：

#facility_image {
    /*margin-top: 100px; <<<<< huge margin
    margin-left: 400px;<<<<< huge margin*/
    width: 37%;
    padding: 5px;
    float: left;
}

#facility_data
{
    width:60%;
    margin-right:2%;
    float:left;    

}

设施信息

设施编号

设施名称

地址

城市

省份

邮政编码

屋顶面积

检查了车顶区域

上次检查

由检验

您缺少浮动

#facility_data {
   float: left;
}


#facility_image {
    margin-top: 0;
    margin-left: 0;
}

虽然不是最好的技术，但您可以学习使用FlexBox，我已经整理好了，删除了一些不必要的HTML元素，还修复了HTML中的一个错误，这是第二个

。应该是

关闭列表

在JSFIDLE中，我们可以看到以下简化的css作为示例：

.facility_info {
    width: 800px;
}

.facility-list {
    float:left;
    width: 400px;
}

.facility-image {
    width: 350px;
    float: right;
}

.facility\u info

足够宽，可以容纳定义的子宽度和添加边距的浏览器默认样式

然后这两个子对象分别向左和向右浮动。选择器直接添加到

和

标记中，因为您不需要包装器（尽管您可以包装这些子项并将css应用于包装器）

我使用的是类而不是ID，从长远来看这会更好，因为这样可以更容易地在项目上维护css。ID添加样式的方式很难超越，不能重复使用，并且不需要进行样式设置

---

除此之外，浏览器添加到html元素中的默认css属性也让您有些痛苦。加载一个文件将对此有所帮助。重置css声明会在css文件顶部加载一些默认值，将各种值设置为0，以覆盖浏览器设置的默认属性。它为您提供了一个更一致、更少混乱的基础，让您可以从

开始设计这些页边距本应用于其他用途，谢谢您的帮助！

.facility_info {
    width: 800px;
}

.facility-list {
    float:left;
    width: 400px;
}

.facility-image {
    width: 350px;
    float: right;
}