Mam element pozycjonowany bezwzględnie, który jest już zakotwiczony do swojego bezpośredniego elementu nadrzędnego. Moja obecna specyfikacja projektowa wymaga, aby kilka z tych elementów było prawidłowo wyrównane na samym końcu kontenera przodka. Próbuję znaleźć te współrzędne w jQuery, ale bez względu na to, co próbuję, po prostu nie mogę uzyskać właściwych obliczeń. Moją pierwszą myślą było ustawienie przesunięcia dziecka na całkowitą szerokość najwyższego pojemnika i odjęcie szerokości dziecka, ale ponieważ w obu jest wypełnienie, jest to trochę odrzucane. Czego tu brakuje? Czy jest lepszy sposób na osiągnięcie tego? Niestety muszę zachować właściwości pozycji rodzica i dziecka.

$('.child').offset({
  top: $('.parent').offset().top / 2,
  left: $('.container').outerWidth() - $('.child').outerWidth()
});
#container {
  border: 1px solid black;
  padding: 10px;
}

.parent {
  position: relative;
}

.child {
  position: absolute;
  padding: 10px;
  top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <nav id="menu">
    <div class="parent">
      Parent
      
      <span class="child">Child</span>
    </div>
  </nav>
</div>
0
Carl Edwards 20 listopad 2019, 16:47
Dlaczego nie umieścić right: 0 w elemencie podrzędnym bez jQuery?
 – 
zur4ik
20 listopad 2019, 16:53
right: 0 wyrównuje element pozycjonowany bezwzględnie do prawej krawędzi obwiedni elementu przodka. Ponadto, ponieważ w CSS zaangażowanych jest wiele układów współrzędnych – strona, dokument, widok i same elementy – musisz określić w swoim pytaniu, które współrzędne chcesz znaleźć. Ale jeśli chcesz tylko wyrównać element wzdłuż prawej krawędzi, nie jest potrzebny JavaScript (lub JQuery) -- right: 0 jest wszystkim, czego potrzebujesz, zakładając, że ustawiłeś prawidłowy element przodka jako blok zawierający.
 – 
amn
20 listopad 2019, 17:02

2 odpowiedzi

Może czegoś mi brakuje, ale nie rozumiem, dlaczego potrzebujesz tutaj Jquery. Prosty float: prawo zadziała idealnie.

#container {
  border: 1px solid black;
  padding: 10px;
}

.parent {
  position: relative;
}

.child {
  
  float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <nav id="menu">
    <div class="parent">
      Parent
      
      <span class="child">Child</span>
    </div>
  </nav>
</div>

Ponieważ powiedziałeś, że nie możesz używać float, oto przykład użycia fleksa:

#container {
  border: 1px solid black;
  padding: 10px;
}

.parent {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.child {
  padding: 10px;
  top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <nav id="menu">
    <div class="parent">
      Parent
      
      <span class="child">Child</span>
    </div>
  </nav>
</div>
0
Nicolas 20 listopad 2019, 17:03
Moje ograniczenia projektowe niestety mi na to nie pozwalają.
 – 
Carl Edwards
20 listopad 2019, 16:52
Czy możesz dodać więcej informacji na temat tego, z czego możesz korzystać? Może też nie ma tam twojego problemu. Powinieneś być w stanie użyć float, to czysta własność css.
 – 
Nicolas
20 listopad 2019, 16:53
Zredagowałem moją odpowiedź, aby uwzględnić użycie flex.
 – 
Nicolas
20 listopad 2019, 17:02
Czy można to osiągnąć, mając jednak absolutny wpływ na dziecko?
 – 
Carl Edwards
20 listopad 2019, 17:02
Nie sądzę, ale możesz usunąć tę właściwość za pomocą Jquery / Javascript,
 – 
Nicolas
20 listopad 2019, 17:04

Możesz użyć właściwości CSS transform do wyśrodkowania w pionie i right: 0%, aby utrzymać ją na prawym końcu.

   #container {
      border: 1px solid black;
      padding: 10px;
    }

    .parent {
      position: relative;
    }

    .child {
      position: absolute;
      padding: 10px;
      top: 50%;
      right: 0%;
      transform: translate(0%,-50%);
    }
<div id="container">
      <nav id="menu">
        <div class="parent">
          Parent
          <span class="child">Child</span>
        </div>
      </nav>
    </div>
0
Hackinet 20 listopad 2019, 16:58