如果类存在，则为下一个 div 提供上边距，但边距高度由 php 确定

Question

只有当类固定标题存在时，我才尝试为第一个 div 提供上边距，我尝试使用纯 css 执行此操作，但变量很多而且我正在迷失方向，所以我正在考虑使用jQuery。

这里有一些简单的html

<div id="page-container">
  <div id="header" class="fixed-header">header</div>
  <div>Test 2</div>
  <div>Test 3</div>
  <div>Test 4</div>
  <div>Test 5</div>
</div>

基本上，如果 .fixed-header 确实存在，则给第一个 div，在这种情况下，它是 'test2' 与标题匹配的上边距，如果没有 'div2' 则给 'div3' 上边距，依此类推.

现在对于棘手的部分，必须从 php 脚本确定上边距，这是我如何获得下面的标题高度。

<?php echo $header_options['header_height'] ?>

如何在 jquery 中做到这一点？

这是一个让我开始的基本小提琴

Answer 1

如果我理解正确，你可以在 CSS 中这样做：

.page-container div.fixed-header:nth-child(1) + div,
.page-container div:not(.fixed-header):nth-child(1){
    margin-top:20px;
    // or
    margin-top: <?php echo $header_options['header_height'] ?>px;
    background:red;
}

这将为 .fixed-header 之后的第一个 div 或 .page-container 中的第一个 div（如果不存在固定标题）提供一个边距。

Demo

如果您希望边距与没有 php 的标题高度完全相同，那么是的，您将不得不求助于 javascript/jquery。像这样的

$('#page-container div.fixed-header:nth-child(1)').each(function(){
    $(this).next().css({'margin-top':$(this).height()});
});

Answer 2

使用length查找div出口与否：

if($('.fixed-header').length > 0){
//do your stuff here
}

我认为它应该只适用于 css：

#page-container .fix-header{
    margin: 5px;
}

Answer 3

你可以单独在 CSS 中做到这一点，你知道......你不需要求助于 Javascript 或 jQuery。

#page-container div:nth-child(1)[class='fixed-header']{
    background:red;
}

Demo of the above、variation 1、variation 2

Answer 4

在页面头部使用 CSS：

#page-container #header.fixed-header + div {
    /* the following should be parsed by php, but
       I don't know whether this generates a full CSS
       rule, or just the relevant length. Adjust as appropriate */
    <?php echo $header_options['header_height'] ?>
}

Answer 5

这里不需要 jQuery...

你想让 .fixed-header 后面的 div 有一个边距吗？使用相邻的选择器“+”

<style>
#header.fixed-header {height: <?php echo $header_options['header_height'] ?>px}
#header.fixed-header + div {margin-top: <?php echo $header_options['header_height'] ?>px}
</style>

顺便说一句，你可以在#header.fixed-header 上设置一个margin-bottom ... ;-)

Answer 6

好吧，如果每个边距相同，那么给容器一个数据属性。如果每个边距都有不同的高度，最直观的选择是为每个项目放置一个数据属性。

如果每个边距都相同，这是你的代码

$(".fixed-header").each(function(item) {
    $($(item).next()).css('margin-top', $(item).parent().data('margin-height'));
});

您的标记应如下所示：

<div id="page-container" data-margin-height="50px">
  <div id="header" class="fixed-header">header</div>
  <div>Test 2</div>
  <div>Test 3</div>
  <div>Test 4</div>
  <div>Test 5</div>
</div>

这相当于下面的 CSS，如果每个页面容器也具有相同的值。

.page-container .fixed-header + div {
    margin-top: 50px;
}

您也可以使用 PHP 生成此 CSS 文件。为了让生活更轻松，您甚至可以将其嵌入到您的 HTML 模板中。如果 margin-height 没有反映任何信息，那么可能生成 CSS 是最好的选择，因为这样，您不需要将无用的信息放在 <style> 或 <script> 标记之外。

<style>
    .page-container .fixed-header + div {
        margin-top: <?php echo $header_options['header_height'] ?>;
    }
</style>

另一种选择是使用 CSS3 attr，目前尚未在所有浏览器中完全支持。 https://developer.mozilla.org/en-US/docs/Web/CSS/attr

.page-container .fixed-header + div {
   margin-top: attr(data-margin-height);
}

这可以让您摆脱脚本，但不幸的是，您必须为每个 .fixed-header 设置 data-margin-height。

我在这些示例中使用了 .page-container 类，因为如果您在同一页面上有多个不同的容器，则可以使用此解决方案。如果您只需要一个，您可以将每个.page-container 替换为#page-container，代码将起作用。小提琴： http://jsfiddle.net/k5V2a/