当前位置：文江博客话题详情

确保内容长度未知的水平对齐 DIV 的块高度相似

发布于 12-20 09:35 字数 616 浏览 6 评论 0 原文

在网站上，我想以以下结构显示产品：

[IMAGE]
[PRODUCT TITLE]
[PRODUCT ID]
[DETAIL TEXT]
[FEATURE LIST]
[PRICE]

导致产品显示如：

现在，问题是，展示的产品有多种，就像这个一样，但有时它们会并排排列。

问题是我想让价格出现在所有区块中的相同位置（垂直方向）。当然，我一开始只看到一个解决方案 - 溢出：隐藏在详细文本/功能列表中。但最终我的内容会被切断，对吗？

另一个问题是还应该有一个more>>如果 UL/LI 列表长度超过 4 个条目，则会出现按钮（扩展器）。就像这样：

我经常思考这个问题，但我似乎找不到合适的解决方案。对于一个我永远不会知道 LI 是否是多行的，因为内容可能更长或更短 - 而且我无法计算此服务器端，因为字体宽度/高度可能会有所不同。

如果有任何建设性的意见，我将不胜感激。

谢谢你！

原文

On a website i'd like to show products in the following structure:

[IMAGE]
[PRODUCT TITLE]
[PRODUCT ID]
[DETAIL TEXT]
[FEATURE LIST]
[PRICE]

Resulting in a product display such as:

Now, the thing is that there are multiple products on display, just like this one, but sometimes they are aligned next to one another.

The problem is that i would like to make the price appear at the same position (vertical wise) in all blocks. Of course i see only one solution at first - overflow:hidden on the detail text / feature listing. But then i'd end up having content cut off, right?

Another problem is that there should also be a more>> button (expander) that appears if the UL/LI-listing is longer than 4 entries. Just like this:

I thought this through quite often, but i seem to find no proper solution. For one i will never know if an LI will be multiline, as the content might be longer or shorter - and i cannot calculalate this serverside, as the font width/height might vary.

I'd appreciate any constructive input here.

Thank You!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦情居士 2024-12-27 09:35:24

只要你有固定的宽度，你就可以使用 inline-block 与负边距混合： http://jsfiddle.net/bymaK/11/

在此处输入图像描述

可悲的是有用在 Chrome、Opera 和 IE 9 中，但完全破坏了 Firefox，因为它对 with:0 和负边距的管理似乎有问题（添加了 "="">问题 #709014 到 Bugzilla 在这篇文章之后）。解决方案是检测此浏览器并将其宽度设置为 1px...

它会产生一个小错误，因为当您调整大小时，价格会扭曲到下一行而不是块，但有 1 个像素，但它不太明显否则结果：

在此处输入图像描述

<div id="container">
    <p>texttexttext</p>
    <ul>
        <li>texttexttext</li>
        <li>texttexttext</li>
        <li>texttexttext<Update/li>
        <li>texttexttext</li>
        <li><a href="#" class="more">more »</a></li>
        <li class="more">more text</li>
        <li class="more">Even more text.</li>
    </ul>
</div><p class="price">$3993.99</p>

.price
{
    height:40px;
    display:inline-block;
    margin-left: -200px;
    margin-right: 200px;
    vertical-align: bottom;
    font-weight: bold;
}
#container
{
    display: inline-block;
    margin-right:10px;
    position:relative;
    width:200px;
    padding-bottom:40px;
    vertical-align: top;
}
ul
{
    list-style-type:disc;
    margin-left:30px
}
li.more
{
    display: none;
}

$(function(){
    $('a.more').click(function(){
        $(this).parent('li').hide().nextAll('li').show(200);
    }); 
});

As long as you have a fixed width you could use inline-block mixed with negative margins : http://jsfiddle.net/bymaK/11/

enter image description here

The sad thing is that it works in Chrome, Opera and IE 9 but completely break Firefox as it's management of with:0 and negative margin seem buggy (Added issue #709014 to Bugzilla following this post). The solution is to detect this browser and set the width to 1px for it...

It create a small bug as when you resize there is 1 pixel where the price warp to the next line but not the block but it's a lot less visible that the result otherwise :

enter image description here

<div id="container">
    <p>texttexttext</p>
    <ul>
        <li>texttexttext</li>
        <li>texttexttext</li>
        <li>texttexttext<Update/li>
        <li>texttexttext</li>
        <li><a href="#" class="more">more »</a></li>
        <li class="more">more text</li>
        <li class="more">Even more text.</li>
    </ul>
</div><p class="price">$3993.99</p>

.price
{
    height:40px;
    display:inline-block;
    margin-left: -200px;
    margin-right: 200px;
    vertical-align: bottom;
    font-weight: bold;
}
#container
{
    display: inline-block;
    margin-right:10px;
    position:relative;
    width:200px;
    padding-bottom:40px;
    vertical-align: top;
}
ul
{
    list-style-type:disc;
    margin-left:30px
}
li.more
{
    display: none;
}

$(function(){
    $('a.more').click(function(){
        $(this).parent('li').hide().nextAll('li').show(200);
    }); 
});

回复收藏 0 原文

人生戏 2024-12-27 09:35:24

也许将包含的 div 设置为 position:relative，然后将价格设置为 position:absolute；底部：0 ？这样，无论框中有多少文本，价格始终为 0（或您设置的任何数字）。

这是一个基本示例： http://jsfiddle.net/PFwJ6/1/

回复收藏 0 原文

月寒剑心 2024-12-27 09:35:24

您可能想使用 javascript 来查找高度并显示“单击查看更多链接”。

首先，在价格 div 上创建一个包含“点击查看更多”链接的 div，并将其设置为 display:none。然后你可以在javascript中使用offsetHeight来找到div的高度。如果高度超过可接受的范围，那么您可以将 div 设置为 display:block。这意味着您可以将所有包含的 div 设置为相同的高度，并使用定位将价格 div 固定到底部。

很抱歉我没有具体的代码给你。我也许很快就能把一些东西放在一起。但这应该为您指明正确的方向。

回复收藏 0 原文

~没有更多了~