<li> элементов перекрываются? Поделиться шириной контейнера без перекрытия? - PullRequest
Новая
       29

<li> элементов перекрываются? Поделиться шириной контейнера без перекрытия?

0 голосов
/ 02 августа 2020

Мои намерения состоят в том, чтобы создать макет расписания, в котором каждый элемент <li> размещается по оси Y относительно временной шкалы слева. Проблема возникает, когда более одного <li> накладываются друг на друга:

Problem example

What I want to achieve is the elements being able to share the width of the list element, , like this:

image 

::-webkit-scrollbar {
  display: none;
}

.day_div ul {
  width: 100%;
  position: relative;
}

.day_div li,
#info_holder li {
  position: relative;
  /* background-color: red; */
  color: white;
  transition: transform .2s ease-in-out;
  cursor: pointer;
  transform: scale(1) rotate(0deg);
  border-radius: 5px;
}

.day_div li::after,
#info_holder li::after {
  content: '';
  position: absolute;
  /* z-index: -1; */
  width: 100%;
  height: 100%;
  opacity: 1;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  /* opacity: 0;
      transition: opacity 0.2s ease-in-out; */
}

.day_div li.no-after::after,
#info_holder li.no-after::after {
  display: none;
  width: 0;
  height: 0;
}

.day_div li::before {
  border-radius: 5px;
}

.day_div li:hover.rotatable {
  /* transform: scale(0.9) rotate(6deg); */
  transform: rotate(6deg);
}


/* .day_div li:hover::after {
      opacity: 1;
    } */


/* skipping 1st child as it is the timeline */

.day_div li {
  background: rgb(60, 225, 226);
  background: linear-gradient(315deg, rgba(60, 225, 226, 1) 0%, rgba(28, 55, 172, 1) 100%);
}

.day_div:nth-child(3) li,
#info_holder li.three {
  background: rgb(60, 226, 124);
  background: linear-gradient(340deg, rgba(60, 226, 124, 1) 0%, rgba(88, 124, 147, 1) 100%);
}

.day_div:nth-child(4) li,
#info_holder li.four {
  background: rgb(122, 168, 91);
  background: linear-gradient(0deg, rgba(122, 168, 91, 1) 0%, rgba(108, 126, 121, 1) 100%);
}

.day_div:nth-child(5) li,
#info_holder li.five {
  background: rgb(246, 176, 101);
  background: linear-gradient(20deg, rgba(246, 176, 101, 1) 0%, rgba(246, 127, 101, 1) 100%);
}

.day_div:nth-child(6) li,
#info_holder li.six {
  background: rgb(156, 87, 151);
  background: linear-gradient(25deg, rgba(156, 87, 151, 1) 0%, rgba(67, 51, 82, 1) 100%);
}

.day_div:nth-child(7) li,
#info_holder li.seben {
  background: rgb(122, 168, 91);
  background: linear-gradient(30deg, rgba(122, 168, 91, 1) 0%, rgba(108, 126, 121, 1) 100%);
}

.day_div:nth-child(8) li,
#info_holder li.eight {
  background: rgb(60, 226, 124);
  background: linear-gradient(35deg, rgba(60, 226, 124, 1) 0%, rgba(88, 124, 147, 1) 100%);
}

.day_div li a,
#info_holder li a {
  top: 0;
  left: 0;
  position: absolute;
  /* width: 100%;
      height: 100%; */
  padding: calc(0.75* 1.25em);
}

.day_div li div,
#info_holder li div {
  display: block;
  position: absolute;
  padding: calc(0.75*1rem);
  overflow: scroll;
  height: 60%;
}

.day_div li a em,
#info_holder li a em {
  font-size: calc(var(--main-text-size)*0.8);
}

.day_div li.content_cutoff a::before,
#info_holder li.content_cutoff a::before {
  display: inline-block;
}

.day_div li a::before,
#info_holder li a::before {
  content: attr(data-start) " - "attr(data-end);
  display: block;
  color: #f1f1f1;
  font-weight: bold;
  font-size: calc(var(--main-text-size)*0.9);
}

.day_div li a.databefore::before,
#info_holder li a.databefore::before {
  content: attr(data-before);
}

.day_div li a em,
#info_holder li a em {
  font-size: calc(var(--main-text-size)*1.2);
}

.day_div:not(:first-child):not(:nth-child(2)) {
  border-left: none;
}

.day_div:last-child {
  border-right: none;
}

.day_div {
  /* may change to be a 5th of parent */
  border: 1px solid #ebebeb;
  width: 16%;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.day_div span {
  /* this is the day text styling */
  position: absolute;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ebebeb;
}
<div class="day_div">
  <!-- monday -->
  <span style="height: 50px; width: 238px;">Måndag</span>
  <ul style="margin-block-start: 25px;">
    <li data-overlappers="0" data-overlapping="0" class="rotatable" style="top: 25px; height: 100px;">
      <a data-start="08:00" data-end="09:00"><em>Matte</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em>Göran</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(189px + 0.9375em);"><em>Katedralen</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(307px + 0.9375em);"><em>Ja</em></a>
      <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: block;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
          <metadata></metadata>
          <g>
            <title>background</title>
            <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
            <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
            </g>
          </g>
          <g>
            <title>Layer 1</title>
            <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
          </g>
        </svg>
      </div>
      <div style="opacity: 0; top: calc(72px + 0.46875em);"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
    </li>
    <li data-overlappers="2" data-overlapping="0" class="rotatable" style="top: 41.6667px; height: 83.3333px;">
      <a data-start="09:10" data-end="10:00"><em>Spanska</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em>Lisa &amp; Andy</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(223px + 0.9375em);"><em>Katedralen</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(341px + 0.9375em);"><em>Nej</em></a>
      <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
          <metadata></metadata>
          <g>
            <title>background</title>
            <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
            <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
            </g>
          </g>
          <g>
            <title>Layer 1</title>
            <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
          </g>
        </svg>
      </div>
      <div style="opacity: 0; top: calc(72px + 0.46875em);"><span></span></div>
    </li>
    <li data-overlappers="2" data-overlapping="1" class="rotatable" style="top: -41.6667px; height: 116.667px;">
      <a data-start="09:10" data-end="10:20"><em>Tyska</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em>Mackan</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(202px + 0.9375em);"><em>Akvariet</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(297px + 0.9375em);"><em>Nej</em></a>
      <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
          <metadata></metadata>
          <g>
            <title>background</title>
            <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
            <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
            </g>
          </g>
          <g>
            <title>Layer 1</title>
            <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
          </g>
        </svg>
      </div>
      <div style="opacity: 0; top: calc(72px + 0.46875em);"><span>Presens som vanligt, glöm inte digilär</span></div>
    </li>
    <li data-overlappers="1" data-overlapping="2" class="rotatable" style="top: -141.667px; height: 83.3333px;">
      <a data-start="09:20" data-end="10:10"><em>Franska</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em>Esma</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(184px + 0.9375em);"><em>grupprummet</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(327px + 0.9375em);"><em>Nej</em></a>
      <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
          <metadata></metadata>
          <g>
            <title>background</title>
            <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
            <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
            </g>
          </g>
          <g>
            <title>Layer 1</title>
            <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
          </g>
        </svg>
      </div>
      <div style="opacity: 0; top: calc(72px + 0.46875em);"><span></span></div>
    </li>
    <li data-overlappers="0" data-overlapping="2" class="rotatable" style="top: -158.333px; height: 300px;">
      <a data-start="10:00" data-end="13:00"><em>Lunch</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em></em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(181px + 0.9375em);"><em></em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(271px + 0.9375em);"><em>Nej</em></a>
      <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
          <metadata></metadata>
          <g>
            <title>background</title>
            <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
            <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
            </g>
          </g>
          <g>
            <title>Layer 1</title>
            <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
          </g>
        </svg>
      </div>
      <div style="opacity: 0; top: calc(72px + 0.46875em);"><span></span></div>
    </li>
    <li data-overlappers="0" data-overlapping="0" class="rotatable" style="top: -158.333px; height: 200px;">
      <a data-start="13:00" data-end="15:00"><em>Mentorstid</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(117px + 0.9375em);"><em>Patrik</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(194px + 0.9375em);"><em>Katedralen</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(312px + 0.9375em);"><em>Nej</em></a>
      <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
          <metadata></metadata>
          <g>
            <title>background</title>
            <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
            <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
            </g>
          </g>
          <g>
            <title>Layer 1</title>
            <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
          </g>
        </svg>
      </div>
      <div style="opacity: 0; top: calc(72px + 0.46875em);"><span>Ta med datorer och inlämmningslapp</span></div>
    </li>
  </ul>
</div>

Вот jsfiddle: https://jsfiddle.net/Snakehater/6dk84n1y/8/

Как я могу решить эту проблему?

1 Ответ

2 голосов
/ 02 августа 2020

Используйте флексбоксы. Руководство по Flexbox . Для достижения желаемого вам потребуется несколько флексбоксов. Будет небольшая переделка, но тогда выравнивание будет намного проще. Вам также следует изучить CSS Сетки . 

ul{
display:flex;
flex-direction:column;
justify-content:space-between;
}
...