html - 将一个div float 到另一个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>

我试图将#facility_image浮动到#facility_data的右侧。

这是我的CSS

#facility_general_info {
    padding: 5px;
    float: left;
    width: 750px;
    line-height: 110%;
}

#facility_info  ul {
    margin-left: -40px;
    list-style-type: none;
}

#facility_info h3 {
    color: #0d55b7;
    border-bottom: 2px solid #0d55b7;
}

#facility_info {
    margin-left: 50px;
    width: 750px;
    float:left;
}

#facility_data{
    width: 375px;
    margin: 0 !important;
}

/*facility image*/
#facility_image {
    margin-top: 100px;
    margin-left: 400px;
    width: 350px;
    padding: 5px;
    float: left;
}
#fac_image_wrapper p {
    width: 250px;
}

#fac_image_wrapper{
    text-align: center;
}

这是JSfiddle。

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

最佳答案

您正在为图像div设置一个巨大的边距，将其放置在屏幕下方。

让#facility_data占据容器div的60％并向左浮动，让图像占据另外37％的容器并去除边距。您还需要为#facility_data提供一些边距权限，以在2个分区之间保留一些空间：

#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_general_info {
	padding: 5px;
	float: left;
	width: 750px;
	line-height: 110%;
}

#facility_info  ul {
	margin-left: -40px;
	list-style-type: none;
}

#facility_info h3 {
	color: #0d55b7;
	border-bottom: 2px solid #0d55b7;
}

#facility_info {
	margin-left: 50px;
	width: 750px;
	float:left;
}

#facility_data{
	width: 375px;
	margin: 0 !important;
}

/*facility image*/
#facility_image {
	width: 37%;
	padding: 5px;
	float: left;
}

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

}

#fac_image_wrapper p {
	width: 250px;
}

#fac_image_wrapper{
	text-align: center;
}

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