小编Joh*_*ohn的帖子

我正在编写自己的轻量级博客平台(我正在尝试学习PHP和jQuery,所以我不只是想使用Wordpress).使用PHP,我有一个分页系统,每页显示5篇博文.在我的while循环中,我希望有一个"发表评论"的链接,当点击它时,会打开一个有文本框输入评论的DIV.我正在使用的当前代码在页面上打开所有5个评论DIV.我需要能够为每个提交DIV提供一个唯一的ID(基于我假设的博客文章ID)并将其放入我的jquery切换功能中,以便在单击链接时只打开一个注释DIV,而不是全部他们.谁能帮帮我吗？

这是我的jQuery,它在页面上打开所有切换的div:

<script type="text/javascript"> 
   $(document).ready(function() {  
     $(".toggleCommentBox").click(function() {
       $(".commentBox").toggle()
     });  
   });      
</script>

这是我的while循环中的代码,它显示了博客文章和链接:

<a href = "#" class = "toggleCommentBox">Leave a Comment</a>

<div class = "commentBox" style = "display:none;">
    ...Form stuff in here
</div>

我不需要帮助注释框div中的表单内容,我只需要帮助jQuery就可以使页面上的每个5个注释框都是唯一的,并且所有这些注释框都可以单独切换,而不是一个链接打开所有5切换页面上的DIV,就像现在发生的一样.任何人都可以给我的任何帮助将不胜感激.

我有一些绝对定位的div有两行文字,一个h2和一个p.我试图让文本成为:在绝对定位的div中垂直居中,右对齐,并且在h2和p标签之间存在换行符.

绝对定位的div包含在母公司内,所以我想我可以用Flexbox,就解决了这个问题,但原来它更难于预期.我已经给出了父显示:flex和align-items:center,它们垂直居中.但是后来我的h2和p在同一条线上,没有换行符.

那么我使用了flex-direction:column创建了一个换行符,但是文本不再是垂直居中的.如果我使用align-items:flex-end和flex-direction:列,文本将右对齐,并且在h2和p之间会有换行符,但是它们不会垂直居中.

margin-right:auto可以正确对齐项目,但结合align-items:center和flex-direction:列,它不起作用.float:右边也行不通.

我的标记看起来像这样:

    <div class = "col-sm-12">
      <div class = "row overlay-container">
        <img src = "_img/top-right@4x.png" class = "img-responsive grid-image" alt = "top-right@4x image" />
          <div class = "overlay overlay-2">
           <h2>Recent Work</h2>
           <p>Lorem ipsum dolor</p>
         </div> <!-- /overlay -->
      </div> <!-- /row -->
    </div> <!-- /top right -->

overlay是overlay-container中绝对定位的div.覆盖图是位于图像的一部分上方的框.显示:上面提到的flex和其他属性都在overlay类上.

似乎无论我尝试什么,我只能从三个条件中得到两个才能工作.使用flexbox不是必需的,但我认为它可以很容易地使文本垂直居中.有人可以帮忙吗？

我需要一些帮助来防止下面的一些文本和图像在包装时向上推图像。请参阅所附图片以最好地理解我在说什么。目标是让所有图标水平排列，并使“This Text Is”与“Some Text”和“More Text”对齐。“更长”应该低于其他所有内容。

每个图标和文本都包含在自己的容器 div 中，如下所示：

  <div class = "icon">
    <a href = "#">
     <img src = "icon.png" />
     <h3>Some Text</h3>
   </a>
  </div>

这是我用来创建固定宽度列的 CSS：

  .icon {
    display: inline-block;
    width: 150px;
  }

似乎“显示：内联块”是导致问题的原因，但是如果我将其更改为“内联”，图标 div 将失去它们的固定宽度。使用边距、填充或定位来移动被向上推回的图标不是一个有效的解决方案，因为这会变得混乱。总共有 10 个图标，图标 div 宽度根据浏览器宽度而变化（这使得文本根据浏览器宽度在不同的点换行）。我希望有一个简单的 CSS 解决方案，例如“垂直对齐”（不起作用）。

任何帮助将不胜感激。