我试图使代码片段工作。我刚刚开始这个,我目前只为我的手机设计它。您可以通过单击项目和今天来查看问题。
我有一个div(#data-container
),它由两个div(.project, .today
)组成,我希望这两个div可以像标签一样并排。所以,当我点击它们各自的按钮时,它会滑动并显示相应的div。我有它工作,但有2个问题。
它们是如何工作的 - #data-container
有white-space: nowrap
(儿童divs不会包裹并且并排放置并且滑动将起作用)并且它的子div(.project and .today
)被设置为width: 100%
和inline-block
。
这个问题
data-container
需要能够垂直滚动并且可以在当前选定的div周围包装文本,但white-space: nowrap
使文本溢出。我试过word-wrap: break-word
,它不起作用。我也可以通过设置display: hidden
使其工作,但我希望div滑动。#data-container
设置为overflow-y: scroll
时,它会使divs水平滚动,从而打破整个系统。我需要一种方法来使data-container
只能垂直滚动并包装文本。
玉
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>
我厌倦了等待,我想要一个解决方案。它不是我想要或完美的任何方式,但它给出了我想要的幻觉。
我做了.today
到display: none
,#data-container
到overflow-y: auto
和overflow-x: hidden
然后改变了动画。
然后动画现在将当前div移动到某个位置,然后从该位置动画回来。
新动画
$('.navbar-inside-two').click(function() {
if($(this).hasClass('above')) {
$(".today").css({
display: 'inline-block',
left: $("#data-container").width()
});
$(".project").css('display', 'none');
$(".project, .today").animate({left: '0px'}, 150);
$(".navbar-inside-one").removeClass('below').addClass('above');
$(this).removeClass('above').addClass('below');
}
});
$('.navbar-inside-one').click(function() {
if($(this).hasClass('above')) {
$(".project").css({
display: 'inline-block',
left: '-' + $("#data-container").width()
});
$(".today").css('display', 'none');
$(".project").animate({left: "0"}, 150);
$(".navbar-inside-two").removeClass('below').addClass('above');
$(this).removeClass('above').addClass('below');
}
});
试试这个:
#data-container {
white-space: nowrap;
}
.project, .today {
white-space: normal;
}
您还可以考虑使用#data-container {overflow-y: auto}
删除丑陋的滚动条...仍应滚动。
你可以做的另一件事是给#data-container
宽度为200%,其子宽度为50%,然后滑动#data-container
。
使用flex有一种简洁的方法。这是我的建议:
#data-container {
display: flex;
}
.project, .today {
display: flex;
min-width: 100%;
white-space: normal;
}
当任何div的内容超过高度时,您也会得到垂直滚动。