Question

我正在尝试调整我的CSS以向右浮动图像，但我似乎无法找到正确的组合。而是将左侧的文本推到页面底部。有没有更好的方法来实现这一目标？

   #experiential_page_container{float:left; width:100%; padding-top:235px;}
#experiential_page_container .marketing_details{float:left; width:695px; padding-left:12px;}
#experiential_page_container .marketing_details h1{float:left; width:100%;font:52px/64px Myriad Pro, Arial, Helvetica, sans-serif; letter-spacing:-2px; color:#fff;text-shadow:0 0 25px #000; padding-bottom:16px; padding-left: 70px;}
#experiential_page_container .marketing_details h1 span{float:left; width:430px; padding-left:80px;font:21px/23px Myriad Pro, Arial, Helvetica, sans-serif; letter-spacing:-1px; text-shadow:none; color:#0bb0d0; text-transform:uppercase;}
#experiential_page_container .marketing_details .content{float:left; width:285px; padding-left:152px;}
#experiential_page_container .marketing_details p{float:left; width:100%; font-size:15px; line-height:16px; color:#fff; padding-bottom:15px;}
#experiential_page_container .marketing_details p a{color:#0bb0d0; text-decoration:none;}
#experiential_page_container .marketing_details p a:hover{text-decoration:underline;}
#experiential_page_container .marketing_details .photo img{float: right;}

experiential page link

Answer 1

您应该确保内部元素的宽度不大于容器的宽度，或者文本元素的宽度加上图像容器的宽度之和不大于容器的宽度：

即：

#experiential_page_container{float:left; width:100%; padding-top:235px;}
#experiential_page_container .marketing_details{float:left; width:100%; padding-left:12px;}
#experiential_page_container .marketing_details .photo{float:right; width:45%; height: 100%;}
#experiential_page_container .marketing_details h1{float:left; width:53%;font:52px/64px Myriad Pro, Arial, Helvetica, sans-serif; letter-spacing:-2px; color:#fff;text-shadow:0 0 25px #000; padding-bottom:16px;}
#experiential_page_container .marketing_details h1 span{float:left; width:430px; padding-left:80px;font:21px/23px Myriad Pro, Arial, Helvetica, sans-serif; letter-spacing:-1px; text-shadow:none; color:#0bb0d0; text-transform:uppercase;}
#experiential_page_container .marketing_details .content{float:left; width:285px; }
#experiential_page_container .marketing_details p{float:left; width:100%; font-size:15px; line-height:16px; color:#fff; padding-bottom:15px;}
#experiential_page_container .marketing_details p a{color:#0bb0d0; text-decoration:none;}
#experiential_page_container .marketing_details p a:hover{text-decoration:underline;}
#experiential_page_container .marketing_details .photo img{float: right;}

在上面的代码中，我删除了所有不必要的填充，为容器提供了正确的宽度。请修改上面的代码，以了解到底发生了什么。

可以在下面找到一个很好的例子：

http://jsfiddle.net/N5mxn/

将div浮动到右边

1 个答案: