个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我正在使用 jQuery、Modernizr 和一些插件(jQuery.dotdotdot、MixItUp)设计一个网站。作为基础，我选择了 this work from codyhouse 。因此，MixItUp 功能(过滤)效果很好，我没有任何问题。
当我想替换原来的 <img> 时，问题就来了通过<div>并添加一些内容。文本可能会溢出，因此我添加了 jQuery.dotdotdot 插件来以一种很好的方式裁剪此文本。因此我添加了自定义 JavaScript 代码:
$(document).ready(function() {
$('#MixItUp').find('> li.mix > div.grid-square').each(function() {
$(this).dotdotdot({
watch: $(this)
});
});
});
我想这很简单。当我触发菜单时，所有框都正确对齐且整齐，但是当它折叠时，那些已被 jQuery.dotdotdot 修剪的文本会弄乱所有网格。如何摆脱这些？
我用一些示例数据创建了下面的代码片段:-)
window.onload = function() {
$(document).ready(function() {
$('#MixItUp').find('> li.mix > div.grid-square').each(function() {
$(this).dotdotdot({
watch: $(this)
});
});
});
}/* solution to the blank gaps problem */
.grid-square {
overflow: hidden;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Responsive farm</title>
<link rel="stylesheet" type="text/css" href="http://codyhouse.co/demo/content-filter/css/reset.css">
<link rel="stylesheet" type="text/css" href="http://codyhouse.co/demo/content-filter/css/style.css">
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/modernizr.js"></script>
</head>
<body>
<header class="cd-header">
<h1>Farm data</h1>
</header>
<main class="cd-main-content">
<div class="cd-tab-filter-wrapper">
<div class="cd-tab-filter">
<ul class="cd-filters">
<li class="filter"><a href="/session/logout/">LOGOUT</a>
</li>
</ul>
<!-- cd-filters -->
</div>
<!-- cd-tab-filter -->
</div>
<!-- cd-tab-filter-wrapper -->
<section class="cd-gallery">
<ul id="MixItUp">
<li style="display: inline-block" class="mix topic-C work_phase-B type-D NORA10_fino3.csv">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NORA10_fino3.csv</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NORA10_fino3.csv">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Time series over 2000-10 of wind and surface-wave parameters at the location of the FINO3 met mast. Values comprise three-hourly sampled wind speed and direction at 10, 100 and 150 m; significant wave height; and dominant wave period and
direction. Supplied by Metno from their NORA10 reanalysis - horizontal resolution 10 km.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_clin_layout.png">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_clin_layout.png</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_clin_layout.png">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Plot of the location of installations in the curvilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_clin_layout.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_clin_layout.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_clin_layout.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Location of installations in the curvilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_rlin_layout.png">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_rlin_layout.png</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_rlin_layout.png">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Plot of the location of installations in the rectilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_rlin_layout.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_rlin_layout.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_rlin_layout.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Location of installations in the rectilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-P Pres_May15_RWF.pdf">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: Pres_May15_RWF.pdf</p>
<p>
<label class="att-name">Information type</label>: Reports, presentations & working papers</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/Pres_May15_RWF.pdf">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Presentation on Uni Research's work on baseline specification of the RWF.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_10_deg_bin_wind_rose_fino3.jpg">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_10_deg_bin_wind_rose_fino3.jpg</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_10_deg_bin_wind_rose_fino3.jpg">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Wind-rose plot of data in vol_flux_10_deg_bin_wind_rose_fino3.txt.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_10_deg_bin_wind_rose_fino3.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_10_deg_bin_wind_rose_fino3.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_10_deg_bin_wind_rose_fino3.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Joint histogram of magnitude and direction of volume flux of air through an isolated ideal WT, dimensions those of the DTU 10 MW reference WT, at the location of the FINO3 met mast. Sample counts at 10 s resolution over 2000-10 broken down
by flux magnitude, bin size 1 m s-1, and flux direction, bin size 10 degs. Derived using results from a downscaling of the ERA-Interim reanalysis of ECMWF with WRF, at 3 km horizontal resolution.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_15_deg_bin_wind_rose_fino3.png">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_15_deg_bin_wind_rose_fino3.png</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_15_deg_bin_wind_rose_fino3.png">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Wind-rose plot of data in vol_flux_15_deg_bin_wind_rose_fino3.txt.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_15_deg_bin_wind_rose_fino3.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_15_deg_bin_wind_rose_fino3.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_15_deg_bin_wind_rose_fino3.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Joint histogram of magnitude and direction of volume flux of air through an isolated ideal WT, dimensions those of the DTU 10 MW reference WT, at the location of the FINO3 met mast. Sample counts at 10 s resolution over 2000-10 broken down
by flux magnitude, bin size 1 m s-1, and flux direction, bin size 15 degs. Derived using results from a downscaling of the ERA-Interim reanalysis of ECMWF with WRF, at 3 km horizontal resolution.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_tseries_fino3.csv">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_tseries_fino3.csv</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_tseries_fino3.csv">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Time series over 2000-10 of the estimated wind forcing of an isolated ideal WT, dimensions those of the DTU 10 MW reference WT, at the location of the FINO3 met mast. Values comprise hourly-sampled magnitude and direction of the volume flux
through the rotor. Derived using results from a downscaling of the ERA-Interim reanalysis of ECMWF with WRF, at 3 km horizontal resolution.</p>
</div>
</li>
<li class="gap"></li>
<li class="gap"></li>
<li class="gap"></li>
</ul>
<div class="cd-fail-message">No results found</div>
</section>
<!-- cd-gallery -->
<div class="cd-filter">
<form>
<div class="cd-filter-block">
<h4 class="is-open">Search</h4>
<div class="cd-filter-content">
<input placeholder="Try file name..." type="search">
</div>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Information type</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter="" name="typeRadioButton" id="type-ALL" checked="" type="radio">
<label class="radio-label" for="type-ALL">All</label>
</li>
<li>
<input class="filter" data-filter=".type-D" name="typeRadioButton" id="type-D" type="radio">
<label class="radio-label" for="type-D">Data files</label>
</li>
<li>
<input class="filter" data-filter=".type-P" name="typeRadioButton" id="type-P" type="radio">
<label class="radio-label" for="type-P">Reports, presentations & working papers</label>
</li>
<li>
<input class="filter" data-filter=".type-S" name="typeRadioButton" id="type-S" type="radio">
<label class="radio-label" for="type-S">Software</label>
</li>
</ul>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Work phase</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter="" name="phaseRadioButton" id="work_phase-ALL" checked="" type="radio">
<label class="radio-label" for="work_phase-ALL">All</label>
</li>
<li>
<input class="filter" data-filter=".work_phase-B" name="phaseRadioButton" id="work_phase-B" type="radio">
<label class="radio-label" for="work_phase-B">Baseline</label>
</li>
<li>
<input class="filter" data-filter=".work_phase-P" name="phaseRadioButton" id="work_phase-P" type="radio">
<label class="radio-label" for="work_phase-P">Post baseline</label>
</li>
</ul>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Wind-farm topic</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter="" name="topicRadioButton" id="topic-ALL" checked="" type="radio">
<label class="radio-label" for="topic-ALL">All</label>
</li>
<li>
<input class="filter" data-filter=".topic-C" name="topicRadioButton" id="topic-C" type="radio">
<label class="radio-label" for="topic-C">Site characterisation</label>
</li>
<li>
<input class="filter" data-filter=".topic-L" name="topicRadioButton" id="topic-L" type="radio">
<label class="radio-label" for="topic-L">Layouts, wakes & loads</label>
</li>
<li>
<input class="filter" data-filter=".topic-M" name="topicRadioButton" id="topic-M" type="radio">
<label class="radio-label" for="topic-M">Management, operations & costs</label>
</li>
</ul>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
</form>
<a href="#0" class="cd-close">Close</a>
</div>
<!-- cd-filter -->
<a href="#0" class="cd-filter-trigger">Menu</a>
</main>
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/jquery-2.1.1.js"></script>
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/jquery.mixitup.min.js"></script>
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/main.js"></script>
</body>
</html>最佳答案
我的问题有一个简单的答案，只需添加
overflow: hidden;
到 .grid-square CSS 类。我编辑了上面的问题以反射(reflect)此解决方案。
关于网格布局上的 jQuery.dotdotdot -> 空白区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31287235/
29
4
0
我正在寻找 css 属性以隐藏带或不带 css 类的段落，如果它包含空格 ( ) 或空白，但我想至少保留一个带或不带的段落，如果有更多的话。 隐藏段落，如果它是空白的或包含 white-space(
在 ruby 中对空白有不同的敏感度/设置吗？ 我有一个 RoR 项目，其中一个事件记录调用有很多组件: max_stuff = FooSummary.select("max(stuff)
如何在脚注中的数字后留空？ 一般来说，对于所有脚注! 例子: 好 : 1 Hello World 坏:1Hello World 最佳答案 正确答案是不要重新定义\thefootnote ，因为这会在脚
我有这段代码，每次第一个 for 循环再次开始时，我希望它将数组重置为空白，因为它正在使用新用户，但我得到的输出包含一个数组中的所有值。 var items = []; for (var i
我试图在CakePHP中生成一个动态xml文档，以输出到浏览器。 这是我的 Controller 代码: Configure::write ('debug', 0); $this->layout =
当我尝试在 nxos 设备上运行某些命令时，输出末尾有一个空格。我必须将输出与现有变量列表进行比较。末尾的空格导致比较错误。如何在字符串列表中使用 .strip() 函数？ - name: Curre
我对 Elasticsearch 相当陌生，我一直在尝试对我的数据进行搜索，并且总是让点击部分为空。即使在数据上传和索引之后也会发生这种情况。我的映射如下: { "mappings":{
我想将about:blank页面更改为firefox插件首页页面的url。 如何更改默认的新标签页网址或可以为新标签页提供默认网址？ 我正在使用Firefox附加SDK。 最佳答案 您可以结合使用Ta
我正在使用 R 并具有以下数据框示例，其中所有变量都是因子: first second third social birth control high
如何清空显示对话框的页面。下面是我的代码HTML: .ui-dialog, .ui-dialog-content { border:1px solid #cde68c; border-botto
更新“他的问题是要求我只运行一次 str ，他们已经告诉我该函数只需要一个参数)” 我试图返回第一个不重复的字符，例如:“blazqnqbla”->第一个不重复的字符是“z”，因此函数需要返回z。现在
我的登录验证有问题。问题是当我尝试使用管理员登录时，页面停止在 checklogin.php 上并且不会告诉它是否成功。这是我的代码。 索引.html Aplik
我的查询是这样的 SELECT Distinct tm.teamid,tm.Team_Name,CONCAT_WS(' ',tu.FirstName+' '+tu.LastName) as Leade
我正在创建指向页面的超链接 url 由用户输入决定，因此由查询字符串决定 ; 问题是变量状态由两个或多个单词组成。因此，当我尝试单击证明表单中输入的超链接时，仅获取状态变量的第一个单词。浏览器将另一个
该问题在每个浏览器中的表现都不同，例如在 Firefox 中大约一个空格如果您再次滚动到顶部，则会出现具有相同高度的滚动框。在 chrome 中，滚动时框会变得狭窄等等...... 使用的调用是:
我对菜单栏文字之间的 CSS 空白有疑问。我尝试了很多方法，但仍然无法解决。有人可以帮我吗？ 菜单问题图片如下: http://imageshack.us/photo/my-images/201/44
我对 有疑问.其中的插入符根据是否为空具有不同的垂直位置: 我的代码: textarea { padding: 0 5px; border: none; outline: n
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Ignore whitespace in HTML 我想在网页上将图片并排放置。这是我的 HTML:
每当我尝试检查元素时，什么都没有出现。我在使用 Chrome。我明白了 Elements | Network | Sources | Timeline | Profiles | Resources |
我在使用 Chrome、Firefox 和 IE 时遇到了一个奇怪的问题。我正在为我的投资组合网站/博客构建一个 WordPress 主题，一切都很好，直到今天，当我在 chrome 中查看该网站时，
我是一名优秀的程序员,十分优秀！