有条件的CSS如果div内容换行

我在页面顶部有一个导航栏。它只是由div包装程式化的a链接组成。 JsFiddle 有条件的CSS如果div内容换行

<div class="navigation"> 
    <a href="someplace">1</a> 
    <a href="someplace">2</a> 
    <a href="someplace">3</a> 
    <a href="someplace">4</a> 
</div>

当用户缩小网页和链接超越窗口的宽度，其中一些跌破。我想要的是一个边界在除了最后一个孩子之外的任何东西的底部 - 也就是说，由于窗口大小调整而不是实际的代码放置，最后一个孩子成为最后一个孩子。这可能吗？

来源

2013-10-29 idlackage

请添加您的实际代码，而不是只提供一个jsFiddle。有一个原因是你被迫在你的问题中加入代码块。 – PlantTheIdea

@PlantTheIdea我没有被迫到这个时候，但肯定。 – idlackage

因为你把'div'和'a'作为代码块，所以你不会被迫“这次”。其骗子的方式来解决这一要求，并高度皱眉。非常感谢您做出改变。 – PlantTheIdea

像这样的东西应该工作

@media (max-width: 100px) { 
    .navigation a { border-bottom: 1px solid red; } 
    .navigation a:last-child { border-bottom: none; } 
} 
}

来源

2013-10-29 20:31:24 Mike

不错，但是有什么办法可以让这个工作适用于其他地层（例如下面的一个或下面的两个而不是一个列）而不计算最大宽度？我用于实际的链接文本长度并不相同，并且所述长度将根据语言而改变。 – idlackage

你要做的就是所谓的自适应设计。您可能想要查看一个框架或一些关于响应式布局的教程。 http://www.getskeleton.com/ – Mike

你好如果你想行之间的分离，你可以使用此代码，评估是否有些a元素从顶部分离：

$('.navigation a').each (function() { 
     var off=$(this).offset().top; 
     if (off > 10) { 
      $('.navigation a').css('border-bottom','3px solid red'); 
     } else { 
      $('.navigation a').css('border-bottom','none'); 
     } 
    });

检查它这里工作http://jsfiddle.net/LenMU/16/

来源

2013-10-29 20:57:16 DaniP

有条件的CSS如果div内容换行

回答

相关问题