html - 将一个 div float 到另一个 div 的右侧

Question

我无法让我的图像位于我要显示的信息的右侧。我的 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“ float ”到 #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 .

如何将图像 float 到我要显示的数据的右侧？

Answer 1

您正在为图像 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_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>