小编Dan*_*niP的帖子

我正在开发一个带有同位素网格的wordpress主题,并且在帖子上悬停应该在浏览器底部的固定位置显示其标题.我有这个简化的结构:

<div id="main">
    <article class="hubbub">
        //article content
    <h2 class="subtitled">
        //h2 content
    </h2>
    </article>
</div>

通过jQuery,悬停在<article>应该显示其子元素h2.subtitled.<article>相对位置,但通过同位素脚本获得绝对位置.在h2.subtitled被定位固定:

.subtitled {
            display: none;
            position: fixed;
            z-index: 999999999;
            bottom: 20px;
            left: 0;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 42px;
            text-align: center;
            color: yellow;
}

由于某种原因,h2.subtitle元素定位固定与父<article>元素相关,因此每个元素的底部<article>.如果我设置了它的<h2>外部<article>,它被定位为与浏览器相关的固定,但它们需要在<article>元素内部,因为无限滚动附加新<article>元素,它们也应该包含<h2>标题.

有谁知道,如何使这个位置固定并与浏览器窗口相关？

谢谢!

我创建了一个表,我希望它height是800px.

如果它溢出,我想制作滚动条,但标题不会滚动.

所以我尝试添加这个CSS:

overflow: scroll;
max-height:800px;

但它对我不起作用.这是整个html文件.问题是什么？

CSS

table{
    overflow: scroll;
   text-align: center;
   margin: auto;
   max-height:800px;
}
table, td, th
{
border:1px solid green;

}
th
{
background-color:green;
color:white;
}

和HTML

<table >
  <tr>
   <th>field a</th>
   <th>field b</th>
   <th>field c</th>
   <th>field e</th>
  </tr>
  <tr>
   <td>3534534</td>
   <td>??"?</td>
   <td>6,463</td>
   <td>4,000</td>
  </tr>
  <tr>
   <td>3534534</td>
   <td>??"?</td>
   <td>6,463</td>
   <td>4,000</td>
  </tr>
</table>

谢谢!!!

我正在尝试让Chrome的DevTools自动重新加载页面,当我保存一个已编辑的SCSS文件时,该文件将编译并对CSS文件进行更改.

我检查了自动重新加载生成的CSS选项,但遗憾的是,它没有按预期工作.

每当我对SCSS文件进行更改并保存时,页面都不会重新加载.我已将工作文件夹添加到工作区,并将文件(SCSS文件和生成的CSS)映射到本地系统驱动器上的各自版本.然而,这没有帮助.

由于scss文件反映在DevTools检查器中,SASS源映射似乎工作正常:

我使用的是Chrome版本31:

我错过了任何我不知道的事吗？我还需要做些什么才能让它发挥作用？

我创建了一些浮动按钮和一个填充整个按钮的链接.但是,垂直对齐似乎不适用 - 链接文本始终位于按钮的顶部<li>.

这是一个小提琴的例子:http://jsfiddle.net/su7nf/

<div id="ButtonContainer">
    <ul>
        <li>
            <div class="TemplateButton"><a href="http://www.google.com">Report an Issue</a></div>
        </li>
        <li>
            <div class="TemplateButton"><a href="http://www.google.com">Contact Us</a></div>
        </li>
        <li>
            <div class="TemplateButton"><a href="http://www.google.com">Enter Project</a></div>
        </li>
        <li>
            <div class="TemplateButton"><a href="http://www.google.com">Request Consultation</a></div>
        </li>
        <li>
            <div class="TemplateButton"><a href="http://www.google.com">How to Protect Yourself From Some Really Long Text</a></div>
        </li>
    </ul>
</div>

    ul {
        list-style-type: none;
    }
    /* BUTTONS INSIDE TAB STYLING */

    #ButtonContainer {
        margin: auto;
        width: 100%;
        overflow: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #ButtonContainer > ul { …

我不知道.也许我做错了什么......我在stackoverflow上查看了其他线程,但我仍然遇到这个不需要的填充问题

 <div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            test
        </div>
    </div>
</div>

这是一张带结果的照片

我有一张这样的桌子

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

在移动设备上我只想显示重要的列,如:

| 1 | 2 | 3 | 4 |

我已经尝试过查看响应式设计,但它所做的只是重新整理整个表格,而不仅仅是显示表格的一部分.

我目前正在使用使用angular的ionic,我还没有看到有人在stackoverflow上做这样的例子.

我有一个表格：

<form action="thankyou.php" method="post">
  <label>Name:</label>
  <input class="contakt-input" type="text" name="firstname"/>

  <label for="">E-mail</label>
  <input class="contakt-input" type="text" name="secondname"/>
</form>

我希望所有元素都位于另一个元素之下，也就是说，我希望它看起来像这样：

姓名：
[字段]
电子邮件：
[字段]

但现在，一切都紧挨着——我该如何解决这个问题？

嗨，我正在回答这个问题，我注意到一个奇怪的行为

上下文

我有一个像这样的 HTML 结构：

<div class="btn">
    Click me
</div>
<div class="element">
    Div Box With Pseudo Element
</div>

和 CSS^{只是相关的}

.element {
    display:none;
}
.element:after {
    content:" ";
    display:block;
    width:0;
    background:black;
    transition:6s ease;
}
.element.clicked:after {
    width:100%;
}

凡element需要是display:none，需要显示/隐藏，当单击该btn元素。这适用于 Jquery 和fadeToggle.

我还添加了 aclass以使用transitionand为伪元素设置动画width。需要fade在父对象的同时进行动画处理。

问题

如果你看到这个FIDDLE，你会注意到第一次点击预期的行为是伪元素增长0到形式，100%但100%没有增长。

如果您再次单击，则可以从 更改100%为0

题

我注意到检查员设置display:none …

我说过divs：

<div>
    <div class="p1"></div>
    <div class="p2"></div>
    <div class="p1"></div>
    <div class="p2"></div>
</div>
<div>
    <div class="p1"></div>
    <div class="p2"></div>
    <div class="p1"></div>
    <div class="p2"></div>
</div>

我想在每个父div中设置最后一个p1 div的样式。我已经尝试了一些最后的代码，但是不想接受。有任何想法吗？

我正在使用twitter bootstrap 3显示tooltip

<td class = "skills" data-toggle="tooltip" data-placement="left" data-original-title="<?php echo $row['skills']; ?>"><?php echo $row['skills']; ?></td>

它显示得很好,但是当我悬停在它上面时,它会将每个单元格移动到右边.

怎么解决这个问题？

我附上了两张快照,你可以看到它向右移动.

编辑

我在这里添加一个测试表,它做了什么,在下一个显示工具提示,td并td向右移动数据.

<table id="example-table" class="table table-striped table-hover table-condensed">
    <thead>
        <th>Serial</th>
        <th>Name</th>
        <th>Rating</th>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td data-toggle="tooltip" data-placement="right" data-original-title="A">A</td>
          <td>php</td>
        </tr><tr>
          <td>2</td>
          <td data-toggle="tooltip" data-placement="right" data-original-title="B">B</td>
          <td>C#</td>
        </tr>
      </tbody>
    </table>

这是 js

 <script type="text/javascript">
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();   
    });
 </script>