如何在多个父div中同时对齐子div？

时间：2019-03-25 22:33:12

标签： jquery

很失败，我正在尝试对齐http://paintings.directory上多个可水平滚动的容器的内容

没有运气，我正在尝试将所有具有相同类的子div滚动到其父div的最左侧。

我一直在寻找一个没有运气的解决方案，因此决定在这里发布一个问题，以寻求帮助。

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

当我单击标题中的（粉红色）1777按钮时，我希望所有子div都在其父div中“ scrollLeft” ...

1 个答案:

答案 0 :(得分：0)

所有<section>元素都滚动到同一位置。

请注意，position()返回“匹配元素集中第一个元素的坐标”。
因此$('.anno_1777').position()获得 any 部分中第一个.anno_1777元素的位置。
然后将所有部分滚动到相同的像素位置。

我建议使用selector context将.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: default;
  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 attribute只是为了使数据与显示的内容分开，但是您也可以仅使用单击年份元素的text()。像这样：

<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);
    }
  });
});

这里是working example。

相关问题
最新问题