我试图创建一个复杂的布局。
它有一个固定的标题。 内容的两个div，左和右。 左侧div应仅垂直滚动。 正确的div分为上下两个div。 右上顶部应仅水平滚动。 右下方div应仅垂直滚动。
出于某种原因，一切正常，除了我的右上方div将水平向上滚动直到某一点，然后它推到下一行。我需要一双新的眼睛来看它，因为我已经盯着它看了好几个小时。
对于可怕的类命名约定感到抱歉。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Notebook</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/leftpanel.js"></script>
<link id="resizeStyle" rel="stylesheet" type="text/css" href="css/home.css">
</head>
<body>
<div id="leftPanel">
<div id="logo">
<a href="home.html" class="logolink">TITLE</a>
</div>
<div id="leftNav">
<ul id="nav">
<a href="planner.html">
<li class="navli">
Planner
</li>
</a>
<a href="notebook.html">
<li class="navli">
Notebook
</li>
</a>
<a href="lessons.html">
<li class="navli">
Lessons
</li>
</a>
<a href="messaging.html">
<li class="navli">
Messaging
</li>
</a>
</ul>
</div>
</div>
<div class="main">
<div class="header">
<ul class="title">
<li id="menuButton">
<a href="#" id="toggle">
<img src="images/menu.png" width="30px" height="30px"/>
</a>
</li>
<li id="name">
TITLE
</li>
<li id="action">
Edit
</li>
</ul>
</div>
<div class="infobar">
<div id="date">
<ul id="dates">
<li>Today</li>
<li>Thursday, April 9, 2015</li>
</ul>
</div>
<div id="calendarView">
<ul id="calView">
<li>Day</li>
<li>Week</li>
<li>Month</li>
<li>+</li>
</ul>
</div>
</div>
<div class="content">
<div class="schedule">
<div class="col1">
<div class="foo">
<table class="day">
<tr>
<td class="time">12 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>1 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>2 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>3 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>4 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>5 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>6 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>7 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>8 AM</td>
<td><span class="selected">Chemistry</span></td>
</tr>
<tr>
<td></td>
<td><span class="selected">Chemistry</span></td>
</tr>
<tr>
<td>9 AM</td>
<td><span class="selected">Chemistry</span></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>10 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>11 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>12 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>1 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>2 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>3 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>4 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>5 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>6 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>7 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>8 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>9 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>10 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>11 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
<div class="rightSide">
<div class="col3">
<div class="moo">
<ul class="mull">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
</ul>
</div>
</div>
<div class="col2">
<div class="foo">
<ul class="full">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
html, body {
background-color: #ffffff;
font-family: 'GothamHTF-Thin';
height: 100%;
width: 100%;
/*min-height: 100%;*/
/*min-width: 100%;*/
margin: 0;
overflow:hidden;
}
.header {
width: 100%;
height: 50px;
background-color: #B5B5B5;
position: relative;
z-index: 1000;
}
.infobar {
width: 100%;
height: 50px;
background-color: #d3d3d3;
position: relative;
z-index: 1000;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.content {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 50px 15px 50px 15px;
margin: -50px auto -50px auto;
width: 100%;
height: 100%;
min-height: 100%;
background-color: #ffffff;
}
.schedule {
height: 100%;
width: 100%;
}
.col1, .col2, .col3 {
padding:0;
margin:0;
display: inline-block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.col1 {
width: 50%;
background-color: #ffffff;
height: 100%;
border-right: 1px solid black;
float: left;
}
.col2 {
width: 100%;
background-color: #ffffff;
height: 50%;
}
.col3 {
background-color: #ffffff;
width: 100%;
height: 150px;
}
.rightSide {
width: 50%;
float: left;
height: 100%;
}
.foo {
width: 100%;
height: 100%;
overflow-y: scroll;
}
.moo {
width: 100%;
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
ul.mull {
width:100% !important;
height:150px !important;
display: inline;
}
ul.mull li {
display: inline-table;
}
table.day{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:50px 0 0 0;
padding:0px;
}
.day tr:nth-child(odd){
background-color:#ffffff;
}
.day tr:nth-child(even) {
background-color:#ffffff;
}
.day td{
vertical-align: top !important;
border:1px solid #d5d5d5;
border-width:0px 0px 0px 0px;
text-align:left;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#000000;
height: 60px;
top: 0;
}
.day tr:last-child td{
border-width:0px 0px 0px 0px;
}
.day tr td:last-child{
border-width:0px 0px 1px 0px;
}
.daytr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.day tr:first-child td:first-child{
border-width:0px 0px 0px 0px;
}
.day tr:first-child td:last-child{
border-width:1px 0px 1px 0px;
}
.selected {
background-color: #747474; color: #ffffff; width: 100%; float: left; height: 100%;
padding: 0;
margin: 0;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
color: #424042;
}
li.active {
color: #424042;
}
.main {
float: left;
height: 100%;
width: 100%;
}
.mainactive {
float: left;
width: 75%;
}
#leftPanel {
background-color: #535353;
float: left;
width: 25%;
text-align: center;
color: #fff;
height: 100%;
display: none;
}
#logo {
background-color: #424042;
font-size: 2.0em;
top: 5;
height: 100px;
}
a.logolink:hover{
color:#fff !important;
display:block;
}
a.logolink {
display:block;
padding-top: 25px;
}
#leftNav {
top: 5%;
}
ul#nav {
padding: 10% 0 0 0;
}
ul#nav a {
font-size: 1.4em;
}
#nav li {
}
li.navli {
list-style-type: none;
padding: 5% 0px 5% 0px;
border-top: 1px solid #5E5B5E;
border-bottom: 1px solid #5E5B5E;
}
li.active {
list-style-type: none;
padding: 5% 0px 5% 0px;
border-top: 1px solid #5E5B5E;
border-bottom: 1px solid #5E5B5E;
}
a#toggle {
color: #000;
padding-top: 0px;
}
.title li{
display: inline-block;
width: 32%;
overflow: auto;
height: 60px;
padding-top: 10px;
}
ul.title {
margin: 0 auto;
padding: 0px;
overflow: auto;
top: 0;
}
#action {
text-align: right;
font-size: 1.6em;
right: 0;
}
#menuButton {
text-align: left;
}
#name {
text-align: center;
font-size: 2.0em;
font-weight: bolder;
}
ul#dates {
list-style-type: none;
width: 100%;
padding: 0;
margin: 0;
}
ul#dates li {
display: inline;
}
#date {
float: left;
width: 50%;
}
ul#calView {
list-style-type: none;
width: 100%;
padding: 0;
margin: 0;
}
ul#calView li {
display: inline;
}
#calendarView {
text-align: right;
}
.time {
width: 30px;
padding-right: 20px;
}
和JS一样，以防它出现任何错误：
$(function(){ // DOM READY shorthand
$("#leftPanel").hide();
$("#toggle").click(function(e){
// e.preventDefault(); // If you use anchors
$("#leftPanel").toggle(),
$(".main").toggleClass("mainactive");
});
});
正如您所看到的，右上方div水平滚动一秒钟，然后即使我不想要它也会突破到新行。我很确定它与花车有关，但我无法弄明白。提前谢谢。
答案 0 :(得分：1)
对于其中class = mull <ul class="mull">
添加display：flex或display：inline-flex应该可以解决问题。
将您的CSS更改为
ul.mull {
width:100% !important;
height:150px !important;
display: flex;
}
在这里工作JSFiddle https://jsfiddle.net/unckcfb4/2/