我的应用程序中有一个侧边栏,可以通过切换按钮隐藏/显示.它只是在"body"上切换一个类,为内容区域添加一些边距并隐藏/显示侧边栏.麻烦的是,内容区域在切换时不会调整其子内容的大小.一旦我调整了浏览器的大小,内容区域就会调整以适应内容,但我需要它在切换后执行此操作而无需调整窗口大小.有没有办法触发元素大小刷新或dom刷新来解决这个问题？使用Chrome 19.x.
$('#sidebar-toggle').click(function(event) {
event.preventDefault();
$('body').toggleClass('with-sidebar-left');
});
编辑:似乎它可能是一个Webkit问题.在Firefox中正常工作.
编辑2:在以下位置设置简化的构建:
https://dl.dropbox.com/u/189605/misc/build-test/grid.html
您可以看到这些框是浮动的:左侧,当您使用小箭头按钮最小化侧边栏时,它应该调整右侧以使更多的框适合.在Webkit中,您必须调整浏览器的大小才能实现它的更多空间.适用于Firefox.
我是编程的初学者,在这种情况下无法理解为什么这个Python代码不能按预期工作.
我试图通过调用函数内的函数来使用递归; 调用该函数n次,并将每个循环将n减1到0,此时它将停止.
相反,我的代码打印'freak'一次,然后我得到'最大递归深度'错误消息.
def print_m():
print ('freak')
def do_n(arg, n)):
if n >= 0:
print (do_n(arg,n))
n = n - 1
我只是对如何在实现中水平居中对齐一列感到困惑！我尝试使用offset-m但它没有居中。
请帮忙！
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" type="text/css" rel="stylesheet">
<div class="row">
<h3 class="center-align">Welcome</h3>
<form class="col s12 center-align">
<!--I want to horizontally align these input fields-->
<div class="row">
<div class="col s3">
<input type="text" id="first_name" placeholder="First Name" name="first_name">
</div>
</div>
<div class="row">
<div class="col s3">
<input type="text" id="last_name" name="last_name">
</div>
</div>
<div class="row">
<div class="col s3">
<input type="email" id="email" name="email">
</div>
</div>
<div class="row">
<div class="col s3">
<input type="password" id="password" name="password">
</div>
</div>
<div class="row">
<div class="col s3">
<input type="submit" class="btn">
</div>
</div> …为什么这个文件不能在IE8中呈现？
在处理我正在做的简单网站的布局时,我遇到了一个非常烦人的问题,我找不到原因!我不知道如何删除提交按钮下面的换行符,扩展它向下的div.
我尽可能地简化了页面,尽管那里可能还有一些不必要的元素.
任何帮助将非常感激!
我有这个代码:
<div style="border:1px solid #afafaf;background-color:#efefef;width:100px;height:14px;">
<div style="text-align:center;width:50px;height:14px;background-color:green;">
50%
</div>
</div>
如果第一个DIV,第二个div可能有0到100像素的宽度(进度条),我如何将50%放在中间
有很多CSS选择器有什么缺点？
是否存在与拥有大量CSS选择器相关的性能问题？任何链接/真实测试？
我找到了https://addons.mozilla.org/en-us/firefox/addon/css-usage/,我看到它的使用的唯一原因是因为它可能有助于从最终的CSS中删除未使用的CSS类,所以它会更小.但它仍然被浏览器缓存,所以我发现它的大小有问题.
我在IE7中有一个不寻常的CSS问题.这是我的html和css代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
.generic_panel {background-color:red; padding:15px; display:block; overflow:hidden;}
.generic_panel h4 {background-color:green; margin:0px; display:block; float:left;}
.generic_panel h2 {background-color:blue; margin:0px; display:block; clear:both; float:none;}
</style>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section id="content">
<section id="payment" class="generic_panel">
<h4><a href="http://mysite.com">Invoice # 000095</a></h4>
<h2>Remaining Invoice Amount: $17.5<br/>
<span>Original Amount: $17.50</span>
</h2>
</section>
</section>
</body>
</html>
在IE7中查看时,h4和h2标签之间有空白区域.我一直试图摆脱那个空白区域.我不明白为什么.generic_panel h2 {margin:0px;}和.generic_panel h4 {margin:0px;} 属性没有摆脱那个空白区域.
如果我删除任何的什么是更加古怪的是padding:15px或display:block …
我无法找到如何使这个链接到CakePHP中我的图像:
<img src="img/default.png" width="130" style="position: absolute; top: 0px; left: 0px; z-index: 3; opacity: 0; ">
$html->image('default.png').....????;
非常感谢!
<html>
<head>
<style type="text/css">
*{padding:0;margin:0;}
body{
background: -webkit-gradient(
linear,
right bottom,
left top,
color-stop(0.25, #F5A432),
color-stop(0.63, #F0F050)
);
background: -moz-linear-gradient(
right bottom,
#F5A432 25%,
#F0F050 63%
);
}
.box{margin-left: 33px; width:100px; height: 100px; background-color:rgb(69,69,69); border: 1px solid rgb(56,56,56);border-radius: 25px; float:left}
#container{padding-left: 37%; padding-right: 30%; width: 1000px; background-color: rgb(64,64,64); position:fixed}
</style>
</head>
<body>
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
上面的代码中没有显示渐变!只是一个纯白色的背景.为什么？