Как одновременно выровнять дочерние подразделения в нескольких родительских подразделениях?

#jquery

Вопрос:

Довольно безуспешно я пытаюсь выровнять содержимое нескольких контейнеров с горизонтальной прокруткой на http://paintings.directory

Безуспешно, я пытаюсь прокрутить все дочерние подразделения — с тем же классом — в крайний левый угол в их родительских подразделениях.

Я безуспешно искал решение и поэтому решил опубликовать вопрос здесь, надеясь найти помощь.

 $('#anno_1777').click(function(e) {  
  $('section').animate({scrollLeft:$('.anno_1777').position().left}, 500);
});

Когда я нажимаю на (розовую) кнопку 1777 в заголовке, я ожидаю, что все дочерние подразделения будут «прокручивать влево» в пределах своих родительских подразделений…

Ответ №1:

Все <section> элементы прокручиваются в одну и ту же позицию.

Обратите внимание, что position() возвращает «координаты первого элемента в наборе сопоставленных элементов».
Таким $('.anno_1777').position() образом получает позицию первого .anno_1777 элемента в любом разделе.
Затем все разделы прокручиваются до одной и той же позиции пикселя.

Я предлагаю использовать контекст селектора для нацеливания на .anno_1777 элемент внутри каждого <section> :

  $('.anno_1777', this)

Для этого выполните итерацию по всем разделам, используя jQuery each() .
Это также позволяет вам убедиться, что соответствующий элемент существует в каждом <section> перед его анимацией.

 var $sections = $('section');

$('#anno_1777').on('click', function(e) {
  $sections.each(function() {
    let $section = $(this);
    let $target = $('.anno_1777', $section);
    if ($target.length) {
      $section.animate({
        scrollLeft: $section.scrollLeft()   $target.position().left
      }, 500);
    }
  });
});

 html,
body {
  margin: 0;
  padding: 0;
}


/* F O N T */

@font-face {
  font-family: Cinetype;
  src: url(/assets/fonts/GT-Cinetype-Mono.ttf);
}

@font-face {
  font-family: America;
  src: url(/assets/fonts/GT-America-Mono-Regular.ttf);
}


/* S E L E C T*/

img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

::selection,
 ::-moz-selection {
  background: WhiteSmoke;
}


/* S C R O L L B A R */

::-webkit-scrollbar {
  box-sizing: border-box;
  width: 16px;
  border: none;
}

::-webkit-scrollbar-track {
  box-sizing: border-box;
  border-top: none;
  border-right: 1px solid #ececec;
  border-bottom: none;
  border-left: 1px solid #ececec;
  background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  box-sizing: border-box;
  height: 100px;
  border-left: 1px solid #ececec;
  border-right: 1px solid #ececec;
  border-top: none;
  border-bottom: none;
  background: white;
}

::-webkit-scrollbar-track:horizontal {
  box-sizing: border-box;
  border-top: 1px solid #ececec;
  border-right: none;
  border-bottom: 1px solid #ececec;
  border-left: none;
  background: #f5f5f5;
}

::-webkit-scrollbar-thumb:horizontal {
  border-left: none;
  border-right: none;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  width: 100px;
}

::-webkit-scrollbar-thumb:window-inactive {
  background: white;
}

header {
  position: fixed;
  float: left;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 16px;
  background: white;
  z-index: 3;
  height: 48px;
  border-bottom: 1px solid #ececec;
  color: royalblue;
  text-transform: lowercase;
}

header span#note {
  position: relative;
  float: right;
  color: silver;
}

div#index_name,
div#index_year {
  position: fixed;
  float: left;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  z-index: 3;
  color: royalblue;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: stretch;
  font-family: Cinetype, 'Courier New', monospace;
  font-size: 12px;
  line-height: 16px;
  font-weight: normal;
  text-transform: capitalize;
  font-variant-ligatures: none;
}

div#index_name {
  top: 48px;
  height: 32px;
  border-bottom: 1px solid #ececec;
}

div#index_year {
  top: 80px;
  height: 48px;
  display: flex;
  /* displays flex-items (children) inline */
  overflow: scroll;
  overflow-y: hidden;
  border-bottom: none;
}

div#index_name div,
div#index_year div {
  box-sizing: border-box;
  margin: auto;
  align-self: stretch;
  flex-grow: 1;
  text-align: center;
  height: 100%;
  padding: 8px 0 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-left: 1px solid #ececec;
  color: Silver;
  background: white;
}

div#index_year div {
  padding: 8px 16px;
  display: table-row;
}

div#index_name div:hover {
  color: green;
  background: #f5f5f5;
}

div#index_year div:hover {
  color: tomato;
  background: #f5f5f5;
}

div#index_name>div:first-of-type,
div#index_year>div:first-of-type {
  border-left: none;
}

#anno_1777 {
  color: pink !important;
}

div#index_artist {
  position: fixed;
  left: 0;
  margin-left: -176px;
  width: 240px;
  top: 128px;
  bottom: 0;
  box-sizing: border-box;
  padding: 0;
  z-index: 2;
  overflow: scroll;
  overflow-x: hidden;
  transition: margin 200ms;
}

div#index_artist:hover {
  margin-left: 0;
}

div#index_artist:hover~div#container {
  padding-left: 240px;
}

div#index_artist div,
div#index_artist div.item {
  position: relative;
  float: left;
  width: 100%;
  color: silver;
  padding: 8px 20px 8px 16px;
  box-sizing: border-box;
  border-bottom: 1px solid #ececec;
  background: white;
  font-family: America, 'Courier New', monospace;
  font-size: 12px;
  line-height: 16px;
  font-weight: normal;
  text-transform: capitalize;
  font-variant-ligatures: none;
  cursor: defau<
  text-align: right;
  transition: padding 200ms, color 200ms;
}

div#index_artist div.item {
  text-align: left;
  cursor: pointer;
}

div#index_artist div.item:hover {
  color: green;
  padding: 16px 20px 16px 16px;
}

div#container {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 128px 0 0 64px;
  display: block;
  margin: 0;
  transition: padding 200ms;
}

div.row {
  position: relative;
  width: 100%;
  height: 316px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  display: flex;
  overflow: hidden;
}

section {
  position: absolute;
  left: 224px;
  right: 0px;
  height: 316px;
  background: white;
  box-sizing: border-box;
  display: flex;
  overflow: scroll;
  overflow-y: hidden;
  padding: 0;
  margin: 0;
  background: #f5f5f5;
}

div.artist {
  position: relative;
  height: 316px;
  width: 224px;
  box-sizing: border-box;
  border-right: 1px solid #ececec;
  border-left: none;
  border-bottom: 1px solid #ececec;
  padding: 16px;
  margin: 0;
  display: block;
  background: white;
}

div.about {
  position: absolute;
  box-sizing: border-box;
  float: left;
  padding: 6px 0 0 0;
  margin: 196px 0 0 0;
  font-family: Cinetype, 'Courier New', monospace;
  font-size: 10px;
  line-height: 12px;
  font-weight: normal;
  text-transform: capitalize;
  font-variant-ligatures: none;
  color: Silver;
  width: 100%;
  height: 32px;
  overflow: hidden;
}

p.info {
  font-family: Cinetype, 'Courier New', monospace;
  font-size: 10px;
  line-height: 16px;
  font-weight: normal;
  text-transform: capitalize;
  font-variant-ligatures: none;
  position: absolute;
  top: 48px;
  border-top: 1px solid #ececec;
  left: 0;
  width: 224px;
  height: 267px;
  box-sizing: border-box;
  padding: 16px 16px 0 16px;
  overflow: hidden;
}

p.info span {
  margin: 0;
  padding: 0 0 10px 0;
  width: 100%;
  display: block;
  position: relative;
}

p.info a:link,
p.info a:visited,
p.info a:active {
  color: Silver;
  text-decoration: none;
}

p.info a:hover {
  color: RoyalBlue;
  text-decoration: none;
}

div.year {
  position: relative;
  height: 301px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: white;
  border-right: 1px solid #ececec;
  display: table-row;
}

div.empty {
  position: relative;
  height: 301px;
  box-sizing: border-box;
  padding: 0 500px;
  margin: 0;
  background: #f5f5f5;
  border-right: none;
  display: table-row;
}

div.year>div:first-of-type {
  position: relative;
  box-sizing: border-box;
  padding: 16px 16px 0 16px;
  margin: 0;
  display: table-cell;
  height: 252px;
}

div.artwork {
  position: relative;
  box-sizing: border-box;
  padding: 16px 16px 0 0;
  margin: 0;
  display: table-cell;
  height: 252px;
}

div.artwork img {
  position: relative;
  box-sizing: border-box;
  float: left;
  padding: 0;
  margin: 0;
  display: inline-block;
  height: 196px;
}

div.year p {
  font-family: America, 'Courier New', monospace;
  font-size: 12px;
  line-height: 16px;
  font-weight: normal;
  text-transform: capitalize;
  font-variant-ligatures: none;
  width: 100%;
  height: 49px;
  padding: 16px;
  text-align: left;
  display: block;
  box-sizing: border-box;
  border-bottom: 1px solid #ececec;
  color: Tomato;
}

div.artist p {
  color: Green;
}

div.artist p.info {
  color: Silver;
  text-transform: none;
}

p {
  font-family: Cinetype, 'Courier New', monospace;
  font-size: 12px;
  line-height: 16px;
  font-weight: normal;
  font-variant-ligatures: none;
  padding: 0;
  margin: 0;
}


/*
div#time {
	position: absolute;
	background: blue;
	padding:0;
	margin:48px 0 0 0;
	overflow-y: scroll;
	overflow-x: hidden;
}

div.year {
	position: relative;
	float: left;
	background: silver;
	padding:0;
	margin:0;
}

div.artist {
	position: relative;
	float: left;
	background: green;
	padding:0 16px 16px 0;
	margin:0;
}

article {
	margin: 0;
	padding: 0;
	background-color: orange;
	display: inline-block;
	box-sizing: border-box;
	vertical-align: bottom;
	white-space:nowrap;
}

img {
	padding: 0;
	margin: 0;
	display: block;
	height: 100px;
}

img:hover {
	z-index: 3;
	height: 300px;
}

figure {
    padding: 0;
    margin: 16px 0 0 16px;
    display: table;
    position: relative;
    float: left;
}
 
figure img {
	padding: 0;
    margin: 0;
    display: block;
}
 
figcaption {
    display: table-caption;
    caption-side: bottom;
}

p {
	font-family: Cinetype, 'Courier New', monospace;
	font-size: 12px;
	line-height: 16px;
	font-weight: normal;
	text-transform: capitalize;
	font-variant-ligatures: none;
	padding: 0;
    margin: 0;
}

p {
	font-family: America, 'Courier New', monospace;
	font-size: 12px;
	line-height: 16px;
	font-weight: normal;
	text-transform: capitalize;
	font-variant-ligatures: none;
	margin: 0;
	padding: 0 0 8px 0;
}

h1, h2 {
	padding:16px 0 0 16px;
}

*/

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <p>Paintings.Directory<span id="note">about</span></p>
</header>

<div id="index_name">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
  <div>O</div>
  <div>P</div>
  <div>Q</div>
  <div>R</div>
  <div>S</div>
  <div>T</div>
  <div>U</div>
  <div>V</div>
  <div>W</div>
  <div>X</div>
  <div>Y</div>
  <div>Z</div>
</div>

<div id="index_year">
  <div>1900</div>
  <div>1899</div>
  <div id="anno_1777">1777</div>
  <div>1897</div>
  <div>1896</div>
  <div>1895</div>
  <div>1894</div>
  <div>1893</div>
  <div>1892</div>
  <div>1891</div>
  <div>1890</div>
  <div>1889</div>
  <div>1888</div>
  <div>1887</div>
  <div>1886</div>
  <div>1885</div>
  <div>1884</div>
  <div>1883</div>
  <div>1882</div>
  <div>1881</div>
  <div>1880</div>
  <div>1879</div>
  <div>1878</div>
  <div>1877</div>
  <div>1876</div>
  <div>1875</div>
  <div>1874</div>
  <div>1873</div>
  <div>1872</div>
  <div>1871</div>
  <div>1870</div>
  <div>1869</div>
  <div>1868</div>
  <div>1867</div>
  <div>1866</div>
  <div>1865</div>
  <div>1864</div>
  <div>1863</div>
  <div>1862</div>
  <div>1861</div>
  <div>1860</div>
  <div>1859</div>
  <div>1858</div>
  <div>1857</div>
  <div>1856</div>
  <div>1855</div>
  <div>1854</div>
  <div>1853</div>
  <div>1852</div>
  <div>1851</div>
  <div>1850</div>
  <div>1849</div>
  <div>1848</div>
  <div>1847</div>
  <div>1846</div>
  <div>1845</div>
  <div>1844</div>
  <div>1843</div>
  <div>1842</div>
  <div>1841</div>
  <div>1840</div>
</div>

<div id="index_artist">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div class="item">Gainsborough, Thomas</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div class="item">Manet, Edouard</div>
  <div class="item">Miró, Joan</div>
  <div>N</div>
  <div>O</div>
  <div>P</div>
  <div>Q</div>
  <div>R</div>
  <div>S</div>
  <div>T</div>
  <div>U</div>
  <div>V</div>
  <div>W</div>
  <div>X</div>
  <div>Y</div>
  <div>Z</div>
</div>

<div id="container">
  <div class="row">
    <div class="artist">
      <p>Gainsborough, Thomas</p>
      <p class="info">
        <img class="portrait" src="http://lorempixel.com/196/196/">
        <span>14 May 1727 — 02 Aug 1788</span>
        <a href="https://en.wikipedia.org/wiki/Thomas_Gainsborough">⟶ Wikipedia</a>
      </p>
    </div>
    <section>
      <div class="year">
        <p>1745</p>
        <div class="artwork">
          <a href="artist/gainsborough-thomas/1745/clayton-jones.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Clayton Jones</div>
        </div>
      </div>
      <div class="year">
        <p>1748</p>
        <div class="artwork">
          <a href="artist/gainsborough-thomas/1748/artist-with-wife-and-daughter.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Artist With Wife And Daughter</div>
        </div>
        <div class="artwork">
          <a href="artist/gainsborough-thomas/1748/cornard-wood-near-sudburry-suffolk.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Cornard Wood, near Sudburry, Suffolk</div>
        </div>
      </div>
      <div class="year">
        <p>1750</p>
        <div class="artwork">
          <a href="artist/gainsborough-thomas/1750/mr-and-mrs-andrews.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Mr and Mrs Andrews</div>
        </div>
      </div>
      <div class="year anno_1777">
        <p>1777</p>
        <div class="artwork">
          <a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">The Watering Place</div>
        </div>
      </div>
      <div class="year">
        <p>1779</p>
        <div class="artwork">
          <a href="artist/gainsborough-thomas/1779/the-blue-boy.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">The Blue Boy</div>
        </div>
      </div>
      <div class="year">
        <p>1785</p>
        <div class="artwork">
          <a href="artist/gainsborough-thomas/1785/the-morning-walk.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">The Morning Walk</div>
        </div>
      </div>
      <div class="empty">
      </div>
    </section>
  </div>

  <div class="row">
    <div class="artist">
      <p>Manet, Édouard</p>
      <p class="info">
        <img class="portrait" src="http://lorempixel.com/196/196/">
        <span>03 Jan 1832 — 30 Apr 1883</span>
        <a href="https://en.wikipedia.org/wiki/Édouard_Manet">⟶ Wikipedia</a>
      </p>
    </div>
    <section>
      <div class="year">
        <p>1863</p>
        <div class="artwork">
          <a href="artist/manet-eduoard/1863/olympia.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Olympia</div>
        </div>
        <div class="artwork">
          <a href="artist/manet-eduoard/1863/the-luncheon-on-the-grass.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">The Luncheon on the Grass</div>
        </div>
      </div>
      <div class="year">
        <p>1864</p>
        <div class="artwork">
          <a href="artist/manet-eduoard/1864/still-life-with-carp.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Still Life With Carp</div>
        </div>
        <div class="artwork">
          <a href="artist/manet-eduoard/1864/still-life-fruits-on-a-table.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Still Life: Fruits on a Table</div>
        </div>
        <div class="artwork">
          <a href="artist/manet-eduoard/1864/branch-of-white-peonies-and-secateurs.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Branch of White Peonies and Secateurs</div>
        </div>
      </div>
      <div class="year anno_1777">
        <p>1777</p>
        <div class="artwork">
          <a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">The Watering Place</div>
        </div>
      </div>
      <div class="year">
        <p>1865</p>
        <div class="artwork">
          <a href="artist/manet-eduoard/1865/woman-at-the-races.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Woman at the Races</div>
        </div>
      </div>
      <div class="year">
        <p>1874</p>
        <div class="artwork">
          <a href="artist/manet-eduoard/1874/the-monet-family-in-their-garden-at-argenteuil.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">The Monet Family in Their Garden at Argenteuil</div>
        </div>
      </div>
      <div class="empty">
      </div>
    </section>
  </div>
  <div class="row">
    <div class="artist">
      <p>Miró, Joan</p>
      <p class="info">
        <img class="portrait" src="http://lorempixel.com/196/196/">
        <span>20 Apr 1893 — 25 Dec 1983</span>
        <a href="https://en.wikipedia.org/wiki/Joan_Miró">© Wikipedia</a>
      </p>
    </div>
    <section>
      <div class="year">
        <p>1937</p>
        <div class="artwork">
          <a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Still Life With Old Shoe</div>
        </div>
      </div>
      <div class="year">
        <p>1937</p>
        <div class="artwork">
          <a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Still Life With Old Shoe</div>
        </div>
      </div>
      <div class="year">
        <p>1937</p>
        <div class="artwork">
          <a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Still Life With Old Shoe</div>
        </div>
      </div>
      <div class="year">
        <p>1937</p>
        <div class="artwork">
          <a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Still Life With Old Shoe</div>
        </div>
      </div>
      <div class="year anno_1777">
        <p>1777</p>
        <div class="artwork">
          <a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">The Watering Place</div>
        </div>
      </div>
      <div class="year">
        <p>1937</p>
        <div class="artwork">
          <a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Still Life With Old Shoe</div>
        </div>
      </div>
      <div class="year">
        <p>1937</p>
        <div class="artwork">
          <a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Still Life With Old Shoe</div>
        </div>
      </div>
      <div class="year anno_1777">
        <p>1937</p>
        <div class="artwork">
          <a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
            <img src="http://lorempixel.com/196/196/"></a>
          <div class="about">Still Life With Old Shoe</div>
        </div>
      </div>
      <div class="empty">
      </div>
    </section>
  </div>

</div>

Редактировать

Поскольку position() размер элемента будет меняться в зависимости от положения прокрутки его родительского элемента со смещением, я рекомендую включать положение прокрутки <section> элемента в scrollLeft вычисление. Я соответствующим образом отредактировал свой код (выше):

 scrollLeft: $section.scrollLeft()   $target.position().left

Редактировать

Чтобы свести к минимуму повторяющийся код, я бы получил год из выбранного элемента и добавил его в ваш селектор классов. Я использую атрибут data только для того, чтобы данные были отделены от отображаемых, но вы также могли бы просто использовать text() элемент clicked year. Что-то вроде этого:

 <div id="index_year">
  <div data-year="1777">1777</div>
  <div data-year="1899">1899</div>
  <div data-year="1900">1900</div>
  ....
</div>

 $('#index_year div').on('click', function(e) {
  let year = $(this).data('year');
  $sections.each(function() {
    let $section = $(this);
    let $target = $('.anno_'   year, $section);
    if ($target.length) {
      $section.animate({
        scrollLeft: $section.scrollLeft()   $target.position().left
      }, 500);
    }
  });
});

Вот рабочий пример.

1. Спасибо @showdev, высоко оценен! Как бы мне лучше всего изменить код таким образом, чтобы он также работал после того, как пользователь «прокручивал» один или несколько родительских разделов? Должен ли я, например, сначала сбросить их все, а затем выполнить это снова?

2. Поскольку position() размер элемента будет меняться в зависимости от положения прокрутки его родительского элемента со смещением, я рекомендую включать положение прокрутки <section> элемента в scrollLeft вычисление. Я соответствующим образом отредактировал свой ответ.

3. Я повторяю код, который вы написали для каждой кнопки «год». Это означает, что вскоре фрагмент кода будет отображаться сотни раз. Как мне лучше всего предотвратить это повторяющееся появление script? Должен ли я назначать для всех дочерних подразделений класс , аналогичный идентификатору года нажатия кнопки (например, ‘anno_1777’)?

4. Я бы взял значение year из выбранного элемента и использовал это для создания вашего селектора классов. Я добавил пример к своему ответу.

5. как мне лучше всего добавить класс в разделы, которые не содержат значения year, на которое я нажимаю? например, нажатие на 1777 вызывает все 1777 рисунков, однако добавляет класс к разделам без рисунков из 1777 …. (так что я могу затем использовать этот класс, чтобы слегка размыть эти разделы). Понятия не имею, когда вернуть их обратно … это мне предстоит выяснить позже -_-«Тысячу раз спасибо!

Вопрос:

Ответ №1:

Редактировать

Редактировать

Комментарии:

Вам также может понравиться

Делайте обновления после подтверждения пользователя, даже если пользователь не предпринимает никаких действий

Возможно ли центрировать div с неопределенной шириной, который содержит два плавающих div также с неопределенной шириной

Могут ли предложения формироваться ПОСЛЕ преобразования необработанного текста в nltk.Text?