我尝试让这个代码片段运行起来。我刚开始学习这个,目前只为我的手机设计了它。您可以通过单击“项目”和“今天”来查看问题。
我有一个 div(#data-container
),其中包含两个 div(.project,.today
),我希望这两个 div 并排并像选项卡一样工作。因此,当我单击它们各自的按钮时,它会滑动并显示相应的 div。我已经让它工作了,但有两个问题。
它们的工作方式 - #data-container
具有 white-space: nowrap
(子 div 不会换行并保持并排,滑动将起作用),它的子 div(.project 和 .today
)设置为 width: 100%
和 inline-block
。
存在的问题
data-container
需要能够垂直滚动,并且可以将文本环绕在当前选择的 div 周围,但white-space: nowrap
会导致文本溢出。我尝试过word-wrap: break-word
,但不起作用。我也可以通过设置display: hidden
来使其工作,但我希望 div 可以滑动。我不明白为什么会出现这个问题。当我将
#data-container
设置为overflow-y: scroll
时,它使 div 水平滚动,这破坏了整个系统。
我需要一种方法使 data-container
只能在垂直方向上滚动并可以换行文本。
Jade
extends ./layout.jade
block content
#maindiv
.sidebar
#profile
img(src= ' #{image} ', width=40, height=40)
span #{name}
ul
li Home
li +Project
li +Task
li Reminders
li Statistics
li Settings
li Help
li
a(href='/logout') Log Out
header
span ☰
h1 LifeHub
.container
.navbar
.navbar-inside-one.below
h2 Projects
.navbar-inside-two.above
h2 Today
#data-container
.project
p It's lonely here. You should add some projects.
.today
input#task(type='text', placeholder='+ Add a New Task', autocomplete='off')
CSS
.container {
position: relative; }
.below {
z-index: 0;
box-shadow: 0;
background-color: white;
color: black; }
.above {
z-index: 1;
box-shadow: 2px 2px 2px 1px #b0b0b0;
background-color: #26A69A;
color: white; }
#data-container {
position: relative;
height: 93%;
overflow-y: scroll;
white-space: nowrap;
width: 100%;
z-index: 0; }
.navbar {
text-align: center;
font-size: 26px;
height: 7%;
min-height: 50px; }
.navbar-inside-one, .navbar-inside-two {
position: relative;
display: inline-block;
width: 50%;
height: 100%;
padding: 10px 10px 10px 10px; }
.project, .today {
display: inline-block;
position: relative;
width: 100%;
word-wrap: break-all;
font-size: 28px;
line-height: 1.63em; }
使用JavaScript进行动画
$('.navbar-inside-two').click(function() {
$(".project, .today").animate({left: "-" + $("#data-container").width()}, 200);
$(".navbar-inside-one").removeClass('below').addClass('above');
$(this).removeClass('above').addClass('below');
});
$('.navbar-inside-one').click(function() {
$(".project, .today").animate({left: "0"}, 200);
$(".navbar-inside-two").removeClass('below').addClass('above');
$(this).removeClass('above').addClass('below');
});
$(document).ready(function() {
//Height function for container and sidebar
(function() {
$(".container, .sidebar").height($("#maindiv").height() - $('header').height());
$(".sidebar").css('top', 49); //TO BE MADE AGAIN
})();
$('span').click(function() {
var sidebar = $('.sidebar').css('left').replace(/([a-z])\w+/g, '');
if (sidebar < 0) {
$('.sidebar').animate({
'left': '0px'
}, 200);
$('.container').animate({
'left': '150px'
}, 200)
} else {
$('.sidebar').animate({
'left': '-150px'
}, 200);
$('.container').animate({
'left': '0px'
}, 200)
}
});
$('.navbar-inside-two').click(function() {
$(".project, .today").animate({
left: "-" + $("#data-container").width()
}, 200);
$(".navbar-inside-one").removeClass('below').addClass('above');
$(this).removeClass('above').addClass('below');
});
$('.navbar-inside-one').click(function() {
$(".project, .today").animate({
left: "0"
}, 200);
$(".navbar-inside-two").removeClass('below').addClass('above');
$(this).removeClass('above').addClass('below');
});
});
/* Messed up Css from multiple Sass files */
.font-head,
.navbar,
.sidebar {
font-family: 'Poiret One', cursive;
font-weight: 100;
letter-spacing: 2.2px;
}
.font-para,
input[type='text'] {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 100;
letter-spacing: 1.4px;
}
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
font-family: 'Source Sans Pro', sans-serif;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
header {
width: 100%;
background-color: #1a70c5;
padding: 10px;
}
span {
box-sizing: border-box;
position: relative;
font-size: 28px;
color: #F8F8F8;
}
h1 {
font-family: 'Poiret One', cursive;
letter-spacing: 2.2px;
margin-left: 10px;
color: white;
font-size: 28px;
display: inline-block;
}
.container {
position: relative;
}
.below {
z-index: 0;
box-shadow: 0;
background-color: white;
color: black;
}
.above {
z-index: 1;
box-shadow: 2px 2px 2px 1px #b0b0b0;
background-color: #26A69A;
color: white;
}
#data-container {
position: relative;
height: 93%;
overflow-y: scroll;
white-space: nowrap;
width: 100%;
z-index: 0;
}
.navbar {
text-align: center;
font-size: 26px;
height: 7%;
min-height: 50px;
}
.navbar-inside-one,
.navbar-inside-two {
position: relative;
display: inline-block;
width: 46%;
height: 100%;
padding: 10px 10px 10px 10px;
}
.project,
.today {
display: inline-block;
position: relative;
width: 100%;
word-wrap: break-all;
font-size: 24px;
line-height: 1.63em;
padding: 20px
}
input[type='text'] {
position: static;
border: none;
background: transparent;
font-size: 16px;
line-height: 16px;
width: 100%;
height: 30px;
color: black;
}
input[type='text']:focus {
outline: none;
border: none;
}
::-webkit-input-placeholder {
color: #D9D9D9;
}
::-webkit-scrollbar {
display: none;
}
#maindiv {
width: 400px;
height: 550px;
position: absolute;
top: 30%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-30%);
transform: translateX(-50%) translateY(-30%);
overflow: hidden;
}
.sidebar {
position: fixed;
left: -155px;
height: 100%;
bottom: 0px;
width: 150px;
background: #333;
}
.sidebar ul {
padding: 0px 5px;
}
.sidebar li {
color: #F7F7F7;
font-weight: 100;
font-size: 22px;
text-align: center;
margin-top: 30px;
}
.sidebar li:first-child {
margin-top: 10px;
}
#profile {
height: 50px;
width: 98%;
margin-top: 10px;
}
#profile img {
vertical-align: middle;
border: 1px solid #333;
border-radius: 100%;
}
#profile span {
display: inline-block;
padding: 5px 0px 0px 10px;
color: white;
font-size: 18px;
}
@media (max-width: 450px) {
#maindiv {
width: 100%;
height: 100%;
}
}
<div id="maindiv">
<div class="sidebar">
<div id="profile">
<img src="something.jpg" width="40" height="40" /><span>Derp</span>
</div>
<ul>
<li>Home</li>
<li>+Project</li>
<li>+Task</li>
<li>Reminders</li>
<li>Statistics</li>
<li>Settings</li>
<li>Help</li>
<li><a href="/logout">Log Out</a>
</li>
</ul>
</div>
<header><span>☰</span>
<h1>Derp Title</h1>
</header>
<div class="container">
<div class="navbar">
<div class="navbar-inside-one below">
<h2>Projects</h2>
</div>
<div class="navbar-inside-two above">
<h2>Today</h2>
</div>
</div>
<div id="data-container">
<div class="project">
<p>Stupid paragraph dosen't wrap when supposed to</p>
</div>
<div class="today">
<input id="task" type="text" placeholder="+ Add a New Task" autocomplete="off" />
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>