Question

我已经把一个红色的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>

alt text

Answer 1

你还有第二个<div id="test">。摆脱它。

Answer 2

你有两个ID =“test”的开场div，所以你的CSS规则#test {width：69％;}被应用了两次。

Answer 3

导致它的是width: 69%;。因为你有两个id=test的div，69％只适用于第二个。不要在多个元素上使用id。

Answer 4

除此之外，您还有其他一些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>

CSS盒被切断了？

4 个答案: