0
我希望左列（#left）具有overflow-y: scroll和overflow-x: visible。然而，overflow-x结束时滚动，当我测试它，尽管代码说不同。我究竟做错了什么？谢谢。溢出-y正在影响溢出-x
$(document).ready(function(){
$("#title").click(function(){
$("#title").hide();
});
$("#one").click(function(){
$("#one").addClass("open");
$("#oneBottom").addClass("clicked");
$("#two").removeClass("open");
$("#twoBottom").removeClass("clicked");
$("#three").removeClass("open");
$("#threeBottom").removeClass("clicked");
$("#four").removeClass("open");
$("#fourBottom").removeClass("clicked");
$("#five").removeClass("open");
$("#fiveBottom").removeClass("clicked");
});
$("#two").click(function(){
$("#two").addClass("open");
$("#twoBottom").addClass("clicked");
$("#one").removeClass("open");
$("#oneBottom").removeClass("clicked"); \t
$("#three").removeClass("open");
$("#threeBottom").removeClass("clicked");
$("#four").removeClass("open");
$("#fourBottom").removeClass("clicked");
$("#five").removeClass("open");
$("#fiveBottom").removeClass("clicked");
});
$("#three").click(function(){
$("#three").addClass("open");
$("#threeBottom").addClass("clicked");
$("#one").removeClass("open");
$("#oneBottom").removeClass("clicked"); \t
$("#two").removeClass("open");
$("#twoBottom").removeClass("clicked");
$("#four").removeClass("open");
$("#fourBottom").removeClass("clicked");
$("#five").removeClass("open");
$("#fiveBottom").removeClass("clicked");
});
$("#four").click(function(){
$("#four").addClass("open");
$("#fourBottom").addClass("clicked");
$("#one").removeClass("open");
$("#oneBottom").removeClass("clicked"); \t
$("#two").removeClass("open");
$("#twoBottom").removeClass("clicked");
$("#three").removeClass("open");
$("#threeBottom").removeClass("clicked");
$("#five").removeClass("open");
$("#fiveBottom").removeClass("clicked");
});
$("#five").click(function(){
$("#five").addClass("open");
$("#fiveBottom").addClass("clicked");
$("#one").removeClass("open");
$("#oneBottom").removeClass("clicked"); \t
$("#two").removeClass("open");
$("#twoBottom").removeClass("clicked");
$("#three").removeClass("open");
$("#threeBottom").removeClass("clicked");
$("#four").removeClass("open");
$("#fourBottom").removeClass("clicked");
});
});.open{
margin-left: 124% !important;
margin-top: 18% !important;
width: 187% !important;
height: 80% !important;
font-size: 250% !important;
}
.clicked{
border: red solid 3px !important; \t
}
html{
width: 100%;
height: 100%;
margin: 0px;
border: 0px;
}
body{
width: 100%;
height: 100%;
margin: 0px;
border: 0px;
}
#title{
height: 10%;
width: 100%;
margin-bottom: 1%;
background-color: rgba(0, 0, 255, 0.5);
}
h1{
text-align: center;
}
#left{
width: 30%;
height: 100%;
position: absolute;
overflow-y: scroll;
overflow-x: visible;
}
#right{
width: 70%;
height: 100%;
position: absolute;
margin-left: 30%;
border-left: solid 2px black;
}
.card{
height: 20%;
width: 80%;
margin-left: 10%;
position: absolute;
background-color: blue;
border-radius: 5px;
border: grey solid 2px;
}
.first{
margin-top: 6.5%;
}
#one{
background-color: green;
}
.second{
margin-top: 50%;
}
#two{
background-color: green;
}
.third{
margin-top: 93%;
}
#three{
background-color: green;
}
.fourth{
margin-top: 136%;
}
#four{
background-color: green;
}
.fith{
margin-top: 179%;
}
#five{
background-color: green;
}
#main{
width: 80%;
height: 80%;
margin-left: 10%;
margin-top: 7.5%;
background-color: white;
border-radius: 5px;
border: grey solid 3px;
opacity: 0.5;
}<html>
\t <head>
\t \t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
\t </head>
\t <body>
\t \t <div id="title">
\t \t \t <h1>Blah Blah Blah</h1>
\t \t </div>
\t \t <div id="left">
\t \t \t <div class="card first" id="oneBottom">
\t \t \t \t <h1>Hello</h1>
\t \t \t \t <p>Heljaldf</p>
\t \t \t </div>
\t \t \t <div class="card first" id="one">
\t \t \t \t <h1>Hello</h1>
\t \t \t \t <p>Heljaldf</p>
\t \t \t </div>
\t \t \t
\t \t \t <div class="card second" id="twoBottom">
\t \t \t \t <h1>Sup</h1>
\t \t \t </div> \t \t
\t \t \t <div class="card second" id="two">
\t \t \t \t <h1>Sup</h1>
\t \t \t </div>
\t \t \t <div class="card third" id="threeBottom">
\t \t \t </div>
\t \t \t <div class="card third" id="three">
\t \t \t </div>
\t \t \t <div class="card fourth" id="fourBottom">
\t \t \t </div>
\t \t \t <div class="card fourth" id="four">
\t \t \t </div>
\t \t \t <div class="card fith" id="fiveBottom">
\t \t \t </div>
\t \t \t <div class="card fith" id="five">
\t \t \t </div>
\t \t </div>
\t \t <div id="right">
\t \t \t <div id="main">
\t \t \t </div>
\t \t </div>
\t </body>
</html>
代码不说不同，它做什么它被告知。我无法在任何地方看到错误。 – jaunt