使用CSS和Javascript制作标签

Question

我试图让代码片段工作一些。我刚刚开始这个，我目前只为我的手机设计了它。您可以通过点击项目立即查看问题。

我有一个div（#data-container），它由两个div（.project, .today）组成，我希望这两个div像标签一样并排。所以，当我点击它们各自的按钮时，它会滑动并显示相应的div。我已经开始工作，但有两个问题。

他们的工作方式 - #data-container有white-space: nowrap（儿童div赢了并且保持并排并且滑动会起作用）并且＆＃39} ; s子div（.project and .today）设置为width: 100%和inline-block。

此问题

1. data-container需要能够垂直滚动，并且可以在当前选定的div周围包装文本，但white-space: nowrap会使文本溢出。我试过了word-wrap: break-word，它没有用。我也可以通过设置display: hidden来使其工作，但我希望div可以滑动。

2. 我不明白为什么会出现这个问题。当我将#data-container设置为overflow-y: scroll时，它会使div水平滚动，从而打破整个系统。

我需要一种方法来使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');
    });

＆＃13;
＆＃13;
$(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');
  });
});
＆＃13;
/* 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%;
  }
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

试试这个：

#data-container {
    white-space: nowrap;
}
.project, .today {
    white-space: normal;
}

您还可以考虑#data-container {overflow-y: auto}删除难看的滚动条...仍应滚动。

您可以做的另一件事是#data-container宽度为200％，宽度为50％，然后滑动#data-container。

Answer 2

我厌倦了等待，我想要一个解决方案。 这不是我想要的任何方式或完美但它给出了我想要的幻想。

我将.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');
        }
    });

Answer 3

使用 flex 可以实现简洁和简单的方式。这是我的建议：

#data-container {
    display: flex;
}

.project, .today {
    display: flex;
    min-width: 100%;
    white-space: normal;
}

当任何div的内容超过高度时，也会获得垂直滚动。

Answer 4

word-wrap: break-word与white-space: nowrap不兼容，因此您实际上需要定位.project个孩子paragraph。

因此只需将其从CSS下方删除 .project。

word-wrap: break-all;

并在代码中的CSS下方添加

.project p {
   white-space: normal;
}

我还在下面的代码片段中完成了上述更改，希望对您有所帮助。谢谢

$(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%;
  font-size: 24px;
  line-height: 1.63em;
  padding: 20px
}
.project p {
  white-space: normal;
}
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>