Question

晚上好先生（当然还有女士们），

我目前遇到一些CSS问题以及一些大容器中一些元素的动态定位。我希望你们中的任何人都可以知道我的问题的解决方案。

也许我只是从解释开始，我将分为三个部分，以便更容易理解。在这篇文章的最后，有两个链接，一个用于可视化它们的步骤，另一个用于第二步的示例jsfiddle。

第一步： 有一个div.container，其高度为255px，动态宽度为33.3%。此容器包含两个div：div.left和div.right。 div.left的宽度恰好为150px，这会使div.right填满整个剩余空间。

我已经尝试过这种方式来解决它，但这不适用于接下来的步骤。

.left {
    float: left;
    width: 150px;
}

.right {
    overflow: hidden;
}

第二步：现在，div.right，h3，span和p元素中应该有三个不同的元素。 h3和span应该像常规元素一样，并使用他们想要使用的空间（比如显示文本）。但p元素应该占据div.right的整个剩余高度。我通过使用本文末尾的jsfiddle链接中的代码实现了这一步。它看起来很酷，但它与下一步不兼容。你可能已经猜到了。

第三步：由于p.description元素包含描述，我想尽可能多地将信息放入这个小元素中。因此，我希望将overflow:hidden与text-overflow:ellipsis结合使用，但这并不奏效。由于某些奇怪的原因，在我添加p.description样式后，h3元素位于span和overflow:hidden元素的右侧。此外，div.right的页脚中还有一个额外的div，即div.btns。这个div包含大约3个普通链接，绝对放在div.right的右下角，我只想让p.description元素包围它周围的文本。

现在，我怀疑，只使用css，所有这些步骤都是可以解决的。至少，我想用css定位元素，并且可以在Javascript中截断文本。

有没有人，谁有想法，我怎么能解决我的问题？

非常感谢提前！

附件：

一张图片中的所有三个步骤：http://cl.ly/image/2t2a3o3o2l0s/steps.png
第二步的JsFiddle：http://jsfiddle.net/S8g4E/1188/

Answer 1

检查这个Jsfiddle：http://jsfiddle.net/Mohamed_nabil/7btp2/

在css中：行（52＆amp; 61）中省略号的最大高度现在为200px，如果您愿意，可以在窗口调整大小或加载时使用jQuery更改此内容。

max-height: 200px; /*This value could be changed with jquery*/

CSS定位多个元素的全宽和高度

1 个答案: