[英]CSS box being cut off?
i have put in a css box colored red and for some reason the very bottom left is cut off is there an explanation (picture below) 我已经把一个红色的css盒子放进去了,由于某种原因,左下角被切掉了,下面有一个解释(下图)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script>
<style type="text/css">
<!--
#test {
background-color: #F00;
height: 375px;
width: 69%;
}
.imz{
margin-bottom:-1%;
}
-->
</style></head>
<body>
<!-- the tabs -->
<span class="tabs">
<a href="#"><img src="../../images/security_tabs.png" class="imz" style="float: left;" /></a>
<a href="#"><img src="../../images/security_tabs.png" class="imz" /></a>
<a href="#"><img src="../../images/security_tabs.png" class="imz" /></a>
</span>
<div id="test">
<!-- tab "panes" -->
<div class="panes">
<div>First tab content. Tab contents are called "panes"</div>
<div>Second tab content</div>
<div>Third tab content</div>
</div>
<div id="test">
</div>
<!-- This JavaScript snippet activates those tabs -->
<script>
// perform JavaScript after the document is scriptable.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("span.tabs").tabs("div.panes > div");
});
</script>
</body>
</html>
You've a second <div id="test">
. 您还有第二个<div id="test">
。 Get rid of it. 摆脱它。
您有两个ID为“ test”的开头div,因此CSS规则#test {width:69%;}被应用了两次。
It's the width: 69%;
width: 69%;
that's causing it. 这是造成它的原因。 Because you've got two divs with id=test
the 69% is only applying to the second one. 因为您有两个id=test
的div,所以69%仅适用于第二个。 Don't use ids on more than one element. 请勿在多个元素上使用ID。
Beside that you have some other css problem too, try this code ,its tested 除了您还有其他CSS问题之外,请尝试以下代码,对其进行测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script>
<style type="text/css">
#test {
background-color: #F00;
height: 375px;
width: 69%;
}
.imz{
margin-bottom:-1%;
}
.tabs a{
float:left;
display:block;
}
#test{
clear:both;
}
</style></head>
<body>
<!-- the tabs -->
<span class="tabs">
<a href="#">afs<img src="../../images/security_tabs.png" class="imz"/></a>
<a href="#">asdf2<img src="../../images/security_tabs.png" class="imz" /></a>
<a href="#">asdf3<img src="../../images/security_tabs.png" class="imz" /></a>
</span>
<div id="test">
<!-- tab "panes" -->
<div class="panes">
<div>First tab content. Tab contents are called "panes"</div>
<div>Second tab content</div>
<div>Third tab content</div>
</div>
<!-- This JavaScript snippet activates those tabs -->
<script>
// perform JavaScript after the document is scriptable.
$(function() {;
// setup ul.tabs to work as tabs for each div directly under div.panes
$("span.tabs").tabs("div.panes > div");
});
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.