0

嘿，我正在尝试将事物彼此相邻并在彼此下方对齐

这是我正在使用的CSS。

/* title styles */
#wpp-post-title {
 float:right;
 width:100px 

 }

 /* thumbnail styles */
 #wpp-thumbnail {
    float:left;
    width:80px;
 }

它显示为这样

在此处输入图像描述

但我希望它像这样显示

在此处输入图像描述

4

5 回答 5

1

使用类而不是 id 并查看 clear 属性http://www.w3schools.com/cssref/pr_class_clear.asp

于 2012-04-22T00:54:54.007 回答
1

像这样的东西可以工作：

jsFiddle 演示：http: //jsfiddle.net/vPvbn/

CSS：

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    display: block;
    height: 80px;
    margin: 10px 0;
    padding: 20px 0 0 85px;
}

HTML：

<ul>
    <li style="background: url(http://i.imgur.com/9M7yb.jpg) no-repeat 0 0; padding-right: 10px;">LEAKED: The Winner of RuPaul's Drag Race Season 4 Is...</li>
    <li  style="background: url(http://i.imgur.com/eJxiy.jpg) no-repeat 0 0; padding-right: 10px;">WATCH: Rihanna's 'Battlefield' Movie Trailer.</li> 
</ul>
于 2012-04-22T01:04:42.037 回答
0 
/* title styles */
#wpp-post-title {
 width:100px 
 display: inline-block;
 .display: inline;
 .zoom:1;

 }

 /* thumbnail styles */
 #wpp-thumbnail {
     display: inline-block;
     .display: inline;
     .zoom:1;
    width:80px;
 }
于 2012-04-22T00:54:46.957 回答
0

没有看到你的 HTML，我只能猜测，但我最好的猜测是在你的 CSS 中添加以下样式：

/* You will probably need to change "li" to something more specific, lest it
   break your existing list styles. */
li {
    overflow:hidden;
}

这将强制列表项将自身包裹在您的浮动位周围。浮动的元素不会改变父容器的高度，所以因为里面的所有东西<li>都是浮动的，所以你的<li>元素的高度是 0px，你会看到你看到的奇怪行为。overflow: hidden通过强制 确认 和 的高度来解决此<li>问题。#wpp-thumbnail#wpp-post-title

于 2012-04-22T00:55:03.910 回答
0

给出#wpp-post-title一个等于缩略图的高度应该可以解决问题，此时浏览器会根据其中的文本自动确定 div 的高度。

另外，确保两个 div 都被赋予了display: inline-block属性

于 2012-04-22T00:57:25.407 回答