- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是一个演示问题的 fiddle http://jsfiddle.net/mjmitche/MMWXj/1/我有一个“关于”部分和一个“技能”部分。如果您单击其中任一部分的标题,则会出现一个显示相关内容的下拉菜单。如果“关于”是打开的,那么如果你点击打开“技能”,它将关闭。这里“关于”已被点击...
About
this is About content revealed by click
Skills
这里“技能”已经被点击了
About
Skills
this is Skills content revealed by click
我希望它们并排 float ,而不是让“关于”标题和“技能”标题相互堆叠,但每个 div 中的内容行为相同,就像这样(如果技能标题已被点击)
About Skills
this is Skills content revealed by click
这是基本的 html 结构(我暂时留下了一些不必要的部分,因为担心一旦我找到问题的解决方案,将这些部分重新插入会改变一切)。
如果你能解释如何实现这一点,我将不胜感激......
<div id="who">
<h1 class="who closed">About</h1>
<div class="content">
<div id="latest" class="three_columns">
<p>
<strong>Boo!</strong>
</p>
</div>
</div>
</div>
<div id="what">
<h1 class="what closed">Skills</h1>
<div class="content">
<div id="consulting" class="three_columns">
<p>
<strong>Boo2!</strong>
</p>
</div>
</div>
</div>
--CSS
div.content { width: 500px; overflow: hidden; margin-left: auto; margin-right: auto;} /* This clears the floats of the child elements, see http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ */
div.three_columns { float: left; width: 290px; margin: 0px; padding: 10px; }
#latest{
padding-left: 30px;
}
/* General headline styles */
/*h1 { font-size: 40px; margin: 0px; padding: 10px; cursor: pointer; }
h2 { font-size: 16px; }*/
h1.who, h1.what, h1.how {
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: center;
}
h2.who, h2.what, h2.how {
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: center;
}
.blue { color: #00b9f1; }
.green { color: #99cc00; }
/* General link styles - Colors: pink #ec008b, blue #00b9f1, dark gray #222, light gray #ebebeb; */
/*a { color: #222222; text-decoration: none; }
h1.hover, a:hover { color: #ec008b; cursor: pointer; }
h1.active, a:active { color: #00b9f1; cursor: pointer; }*/
/* General list styles */
ul { margin: 0px; padding: 0px; }
ul li { margin: 0px; padding: 0px; list-style: none; }
#cent {
margin-left: auto;
margin-right: auto;
width:
}
/*** Styles for the main content sections ***/
div#who, div#what, div#how { height: 100%; margin: 0px; padding: 0px; }
JS
$(function() {
// Hide all closed sections
$(".closed").next().hide();
// Add slide functions to all sections (h1 elements)
$("h1").click(function () {
if($(this).is('.closed')) {
$(".open").delay(200, function() { $(this).next().slideUp("slow"); });
$(this).delay(200, function() { $(this).next().slideDown("slow"); });
$("h1").deactivateElement();
$(this).activateElement();
}
else if($(this).is('.open')) {
$(this).delay(200, function() { $(this).next().slideUp("slow"); });
$(this).deactivateElement();
}
});
// Add a function to toggle the CSS styles
$("a#style_switcher").click(function () { flag = !flag; dark.disabled = flag; });
// Add hover functions to all sections (h1 elements)
$("h1").hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); });
// Delay the call to (slide) functions
// => http://james.padolsey.com/javascript/jquery-delay-plugin/
$.fn.delay = function(time, callback) {
jQuery.fx.step.delay = function() {};
return this.animate( { delay: 1 }, time, callback);
}
// Set an element class to 'open' or 'closed'
$.fn.activateElement = function() { switchClasses($(this), 'open', 'closed'); }
$.fn.deactivateElement = function() { switchClasses($(this), 'closed', 'open'); }
// Do this at start
initialize();
$(".who").delay(600, function() { $(this).next().slideDown("slow"); });
$(".who").activateElement();
});
// Initialization function
function initialize () {
flag = true;
dark = document.getElementById("dark_css");
dark.disabled = flag;
// Set year in copyright section
document.getElementById('year').innerHTML = (new Date()).getFullYear();
}
// Utility function for switching/toggling classes
function switchClasses (element, classToAdd, classToRemove) {
element.addClass(classToAdd);
element.removeClass(classToRemove);
// De/Activate the given element
(classToAdd == 'open') ? element.addClass('active') : element.removeClass('active');
}
最佳答案
将最后一个和第一个 CSS 类更改为:
/*** Styles for the main content sections ***/
div#who, div#what, div#how
{
height: 100%;
margin: 0px;
padding: 0px;
float:left; // new
}
div.content
{
position:absolute; //new
width: 500px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
已编辑!
关于html - 将标题 float 到两个不同的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14163896/
我有 table 像这样 -------------------------------------------- id size title priority
我的应用在不同的 Activity (4 个 Activity )中仅包含横幅广告。所以我的疑问是, 我可以对所有横幅广告使用一个广告单元 ID 吗? 或者 每个 Activity 使用不同的广告单元
我有任意(但统一)数字列表的任意列表。 (它们是 n 空间中 bin 的边界坐标,我想绘制其角,但这并不重要。)我想生成所有可能组合的列表。所以:[[1,2], [3,4],[5,6]] 产生 [[1
我刚刚在学校开始学习 Java,正在尝试自定义控件和图形。我目前正在研究图案锁,一开始一切都很好,但突然间它绘制不正确。我确实更改了一些代码,但是当我看到错误时,我立即将其更改回来(撤消,ftw),但
在获取 Distinct 的 Count 时,我在使用 Group By With Rollup 时遇到了一个小问题。 问题是 Rollup 摘要只是所有分组中 Distinct 值的总数,而不是所有
这不起作用: select count(distinct colA, colB) from mytable 我知道我可以通过双选来简单地解决这个问题。 select count(*) from (
这个问题在这里已经有了答案: JavaScript regex whitespace characters (5 个回答) 2年前关闭。 你能解释一下为什么我会得到 false比较 text ===
这个问题已经有答案了: 奥 git _a (56 个回答) 已关闭 9 年前。 我被要求用 Javascript 编写一个函数 sortByFoo 来正确响应此测试: // Does not cras
所以,我不得不说,SQL 是迄今为止我作为开发人员最薄弱的一面。也许我想要完成的事情很简单。我有这样的东西(这不是真正的模型,但为了使其易于理解而不浪费太多时间解释它,我想出了一个完全模仿我必须使用的
这个问题在这里已经有了答案: How does the "this" keyword work? (22 个回答) 3年前关闭。 简而言之:为什么在使用 Objects 时,直接调用的函数和通过引用传
这个问题在这里已经有了答案: 关闭 12 年前。 Possible Duplicate: what is the difference between (.) dot operator and (-
我真的不明白这里发生了什么但是: 当我这样做时: colorIndex += len - stopPos; for(int m = 0; m < len - stopPos; m++) { c
思考 MySQL 中的 Group By 函数的最佳方式是什么? 我正在编写一个 MySQL 查询,通过 ODBC 连接在 Excel 的数据透视表中提取数据,以便用户可以轻松访问数据。 例如,我有:
我想要的SQL是这样的: SELECT week_no, type, SELECT count(distinct user_id) FROM group WHERE pts > 0 FROM bas
商店表: +--+-------+--------+ |id|name |date | +--+-------+--------+ |1 |x |Ma
对于 chrome 和 ff,当涉及到可怕的 ie 时,这个脚本工作完美。有问题 function getY(oElement) { var curtop = 0; if (oElem
我现在无法提供代码,因为我目前正在脑海中研究这个想法并在互联网上四处乱逛。 我了解了进程间通信和使用共享内存在进程之间共享数据(特别是结构)。 但是,在对保存在不同 .c 文件中的程序使用 fork(
我想在用户集合中使用不同的功能。在 mongo shell 中,我可以像下面这样使用: db.users.distinct("name"); 其中名称是用于区分的集合字段。 同样我想要,在 C
List nastava_izvjestaj = new List(); var data_context = new DataEvidencijaDataContext();
我的 Rails 应用程序中有 Ransack 搜索和 Foundation,本地 css 渲染正常,而生产中的同一个应用程序有一个怪癖: 应用程序中的其他内容完全相同。 我在 Chrome 和 Sa
我是一名优秀的程序员,十分优秀!