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“浮动”到#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。

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

Answer 1

您正在为屏幕下方的图像div设置一个巨大的余量。

让<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>  <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>占据容器div的60％并向左浮动，让图像占据另外37％并移除边距。您还需要为#facility_data提供一些保证金，以便在两个部门之间保留一些空间：

#facility_data

工作示例：

＆＃13;

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

}

＆＃13;

#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;
}

＆＃13;

Answer 2

使用1将图像水平放置数据。删除图像的边距设置，因为图像已在父容器内。当数据在DOM中首先出现时，为这两个元素提供display: inline-block，图像将显示在右侧。

＆＃13;

float: left

＆＃13;

#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; /* Add */
}
#facility_data {
  width: 375px;
  margin: 0 !important;
  display: inline-block; /* Add */
  float: left; /* Add */
}
/*facility image*/

#facility_image {
  width: 350px;
  padding: 5px;
  float: left;
}
#fac_image_wrapper p {
  width: 250px;
}
#fac_image_wrapper {
  text-align: center;
}

＆＃13;

Answer 3

你缺乏漂浮

#facility_data {
   float: left;
}


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

虽然不是最好的技巧，但您可以学习使用FlexBox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

我已经整理了your JSFiddle，删除了一些不必要的HTML元素，并修复了HTML中的错误，这是第二个<ul>。它应该是</ul>来关闭列表。

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

.facility_info {
    width: 800px;
}

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

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

.facility_info的宽度足以容纳定义的子宽度以及浏览器默认的<ul>样式，这样可以增加边距。

然后两个孩子分别左右浮动。选择器直接添加到<ul>和<img />标签，因为您不需要包装器（尽管您可以包装这些子项并将css应用于包装器）。

我使用的是类而不是ID，从长远来看这更好，因为它可以更轻松地维护项目的css。 ID以难以覆盖的方式添加样式，无法重复使用，也不需要样式化。

除此之外，您还会受到浏览器添加到html元素的默认css属性的影响。加载reset.css文件将有助于此。重置css声明会在css文件的顶部加载一些默认值，这些默认值将各种值设置为0以覆盖浏览器设置的默认属性。它为您提供了更加一致且不易混淆的基础，可以从

开始设置样式

将div放在另一个div的右边

4 个答案: