个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
31
4
我正在尝试创建一个复杂的布局。
它有一个固定的标题。两个 div 用于内容，左侧和右侧。左边的 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 水平滚动了一秒钟，然后换行，尽管我不希望这样。我很确定它与花车有关，但我无法弄清楚。提前致谢。
最佳答案
对于 ul 元素 where 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/
关于css - 溢出-x : scroll not working correctly，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29630798/
31
4
0
我正在构建一个基本的 Java 应用程序来将一些文件加载到 mysql 数据库中。我能够毫无问题地加载文件并填充我的表。然而，在与审查我的代码的人交谈后，我显然没有正确关闭我的连接并浪费资源。我在
我正在用 C++ 构建一个库(主要是为了好玩)，我已经研究了一段时间(多年，哈哈，这只是一种爱好) 我最近将一些基础(阅读、库依赖)切换到了另一个库。不幸的是，该库根本不关心“const-correc
如果我绘制单个平面，则纹理坐标会正确映射。 (4 Verts, 4 TC, 6 Indices(2 polys)) 即使它被 segmentation ，(9 Verts, 9 TC, 27 Indi
我正在从文件系统上的 pfx 加载 x509 证书 new X509Certificate2(@"Resources\certificate.pfx", "Password123") 在本地，这工作正
我知道这个问题被问了一遍又一遍。我确实喜欢在与此相关的所有问题中提出建议，并且我在 this question that I put 中做了 BalusC 的操作。 告诉我，我还没有成功。 所以网络应
简而言之，我正在制作一个预订应用程序。预订 ID 需要从 10000 开始，并在每次新预订时增加 1。 我已经开始编写生成此预订编号的方法。我正在努力的是: 第一次运行时，不会有预订编号，所以我不能简
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我查看了 php.net 上的 switch 文档，据我所知，它检查了 switch 和 case 中的变量之间的相等性比较。但是，以下代码似乎适用于所有可能的值(int、null、数组、其他): $
我正在为以多种方式创建和作用于实体的服务编写 JUnit 测试。我希望我的测试能够尝试多种不同的事件组合。我有这样的东西: test1() { /** create entity **/ /** as
关于如何在 Delphi 程序中定义 ShortCut 的示例有很多，但是它们归结为两种不同的方式: 将任意 scCtrl、scShift 和 scAlt 常量添加到键的 Ord() 使用 Menus
我正在尝试学习如何在 Javascript 中创建类以及如何执行对象继承。我已经遵循了一些教程，但我不确定我的代码是否正确。 我是否正确创建了公共(public)函数和属性？如果不是，我应该改变什么？
任何写过 javascript/jquery 的人都知道，有很多不同的方法可以做同样的事情。我目前正在尝试通过表单提交和 AJAX 请求向服务器发送一些数据，我想知道执行此操作的“正确”方法是什么。
一条 200 字节的消息有一个随机字节损坏。 修复损坏字节的最有效方法是什么？ A Hamming(255,247)代码有 8 个字节的开销，但实现起来很简单。 Reed-Solomon error
在C++中，将n -bit整数移位n是未定义的行为: std::uint64_t v = 1; v = v = 64 ? 0 : v > 6; uint64_t mask = (!!temp)
我对 MouseEvents 和 MouseListeners 非常陌生，最近我问了一个关于创建篮球投篮图表的问题。到目前为止我所拥有的是这个 import javax.swing.*; im
http://www.codechef.com/OCT14/problems/PRLADDU 这是当前的运行比赛。 我不想要它的答案，只是让我知道我的方法是否正确。 我遵循的方法是按交换方式添加人和恐
我正在用 Python(在 Linux 系统上的 Apache 服务器上)编写一个需要连接到 Postgres 数据库的 Web 应用程序。因此，它需要数据库服务器的有效密码。在我的 Python 文
我对 JS 和 HTML5 有点陌生。我正在创建一个简单的测验，只是为了好玩。我知道需要使每个问题都能够独立于其他问题而被标记为“正确”。我如何通过 JS，甚至 CSS/HTML5 来做到这一点？我感
我正在编写一个涉及大量 XML 操作的 HTML5 应用程序，其中部分操作涉及比较两个不同 XML 元素的版本。 我需要的是每个 Element、Attr 和 TextNode(所有这些都继承自 No
我正在使用 IBM RAD 开发一些 JPA 实体，并从中开发相应的 JPA Manager Bean。管理器 bean(由 RAD 生成)具有以下成员: @PersistenceUnit priva
我是一名优秀的程序员,十分优秀！