Pertanyaan Elemen bergerak untuk mendorong elemen yang berdekatan hanya jika mereka bertabrakan


Saya memiliki wadah dengan 2 anak.

Satu anak memiliki lebar dinamis dan lebar maksimumnya dapat mengisi wadah

Anak lainnya memiliki lebar tetap dan mulai disembunyikan karena titik awalnya adalah di sebelah kanan overflow:hidden wadah

Yang saya inginkan adalah anak dengan lebar tetap untuk bergerak ke kiri sehingga persis pas ke kanan wadah seperti itu

a) Jika kedua anak masuk ke dalam wadah - elemen lain harus mengatakan diletakkan di sebelah kiri dan

b) Jika tidak ada ruang untuk kedua elemen - elemen fixed-width harus mendorong elemen lain ke kiri sebanyak yang diperlukan untuk masuk ke kanan wadah.

Inilah yang saya coba:

Coba # 1

.container {
  width: 200px;
  height: 50px;
  border: 1px solid green;
  overflow: hidden;
  white-space: noWrap;
}
span {
  height: 50px;
  display: inline-block;
}
.child1 {
  background: aqua;
  float: right;
  width: 50px;
  margin-right: -50px;
  transition: margin .2s;
}
.container:hover .child1 {
  margin-right: 0;
}
.child2 {
  background: tomato;
  //width: 100%;  

}
<div class="container">
  <span class="child1">Fixed</span>
  <span class="child2">Dynamic Width</span>
</div>

<div class="container">
  <span class="child1">Fixed</span>
  <span class="child2">Here is a Dynamic Width box</span>
</div>

Kondisi a) Berhasil tetapi kondisi b) Gagal

Mencoba # 2

.container {
  width: 200px;
  height: 50px;
  border: 1px solid green;
  overflow: hidden;
  white-space: noWrap;
}
span {
  height: 50px;
  display: inline-block;
}
.child2 {
  background: aqua;
  width: 50px;
  margin: 0;
  float: right;
  margin-right: -50px;
  transition: margin .2s;
}
.container:hover .child1 {
  margin-left: -50px;
}
.container:hover .child2 {
  margin: 0;
}
.child1 {
  background: tomato;
  transition: margin .2s;
}
<div class="container">
  <span class="child1">Dynamic Width</span>
  <span class="child2">Fixed</span>
</div>

<div class="container">

  <span class="child1">Here is a Dynamic Width box</span>
  <span class="child2">Fixed</span>
</div>

Kondisi a) Gagal dan kondisi b) Berhasil

Apakah kedua ketentuan dapat dipenuhi dengan CSS saja?

PS: Markup yang saya berikan di demo dapat dimodifikasi. Juga CSS3 termasuk flexbox juga bagus.


32
2018-02-10 10:46


asal


Jawaban:


Ini hanya solusi CSS.

Triknya adalah menggunakan aturan dasar ini:
Pertimbangkan dua atau lebih elemen inline yang dibuat berdampingan. Jika Anda meningkatkan lebar elemen pertama, elemen kedua didorong ke kanan.

Masalahnya adalah Anda perlu elemen untuk pindah ke kiri. Saya memecahkan ini dengan membalik arah X ke elemen anak scaleX(-1) dan kembali pembalik lagi wadah.

Untuk membantu Anda lebih memahami hal ini, Anda dapat berkomentar transform: scaleX(-1); di tautan jsfiddle di bawah ini, dan perhatikan apa yang terjadi.

Keindahan ini adalah bahwa Anda tidak perlu mengetahui lebar .child2. Anda hanya perlu mendorongnya ke kiri.

.container {
    width: 200px;
    height: 50px;
    border: 1px solid green;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    transform: scaleX(-1);
}

span {
   height: 50px;
   display: inline-block;
   transform: scaleX(-1);
}

.child1 {
    background: aqua;
    width: 50px;
    margin-left: -50px;
    float: left;
    transition: margin-left .2s;
    text-align: left;
}

.child2 {
   background: tomato;
}

.container:hover .child1 {
    margin-left: 0;
}
<div class="container">
    <span class="child1">Fixed</span>
    <span class="child2">Dynamic Width</span>
</div>

<div class="container">
    <span class="child1">Fixed</span>
    <span class="child2">Here is a Dynamic Width box</span>
</div>

Juga aktif jsfiddle


Solusi 2

Solusi lain yang sedikit lebih sederhana adalah menggunakan direction: rtl; di kontainer. Dengan membalik arah elemen inline dari right tHai left, kami mencapai efek yang sama tanpa perlu menggunakan transformasi CSS3.
Lihat http://jsfiddle.net/epfqjtft/12/


31
2018-02-10 12:24



Karena css tidak bisa melakukan pernyataan kondisional (permintaan media bar), saya tidak berpikir ini sungguh mungkin dengan css saja.

memperbarui


Saya telah melihat itu aku s sebenarnya mungkin menggunakan transformasi CSS3 (yang berfungsi di browser modern). tetapi untuk berjaga-jaga jika beberapa pengguna mungkin menginginkan dukungan browser yang lebih tua yang tidak dapat disediakan oleh transformasi CSS3, saya akan tetap membiarkannya di sini.


Selain itu, saya telah menggunakan pemosisian sebagai pengganti pelampung untuk 'membersihkan' styling (dan mencoba jquery):

$('.container').hover(function() {

  var parentWidth = $(this).width();
  var thisWidth = $(this).find(".child1").width() + 50; /*i.e. width of fixed box*/
  if (parentWidth < thisWidth) { /*if it doesn't fit, move it!*/
    $(this).find('.child1').addClass("moveLeft");
  }
}, function() {
  $(this).find(".child1").removeClass("moveLeft");
});
.container {
  width: 200px;
  height: 50px;
  border: 1px solid green;
  overflow: hidden;
  white-space: noWrap;
  position: relative;
}
span {
  height: 50px;
  display: inline-block;
}
.child2 {
  background: aqua;
  width: 50px;
  margin: 0;
  position: absolute;
  top: 0;
  right: -50px;
  transition: all .2s;
}
.child1 {
  background: tomato;
  transition: all .2s;
  position: absolute;
  top: 0;
  left: 0;
}
.container:hover .child2 {
  right: 0;
}
.moveLeft:hover {
  left: -50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <span class="child1">Dynamic Width</span>
  <span class="child2">Fixed</span>
</div>
<div class="container">
  <span class="child1">Here is a Dynamic Width box</span>
  <span class="child2">Fixed</span>
</div>


Adapun 'solusi' Anda, Anda harus menguji apakah child + 50px aku s greater than lebar induk, jika demikian, pindahkan child1. Jika tidak, tidak ada tindakan yang diperlukan.


7
2018-02-10 11:12



Oke, saya mengubah kode LinkinTED sedikit. Coba ini: http://jsfiddle.net/epfqjtft/9/

Tentu saja, saya tidak tahu apakah itu sesuatu yang dapat Anda kerjakan. Jenis masalah ini harus diselesaikan dengan Jquery.

.container {
    width: 200px;
    height: 50px;
    border: 1px solid green;

    display: table;
    table-layout: fixed;
    transition: all 2s;
}
span {
   height: 50px;
   display: table-cell;
    transition: all .2s;
}
.child1 {
    background: tomato;
    width: 100%;
}
.child2 {
    background: aqua;
    width: 0px;
    overflow: hidden;
    transition: all .2s;
}
.container:hover .child2 {
    width: 50px;
}

<div class="container">
    <div class="wrapper">
        <span class="child1">Dynamic Width</span>
    </div>
    <span class="child2">Fixed</span>
</div>    
<div class="container">
    <div class="wrapper">
        <span class="child1">Here is a Dynamic Width box</span>
    </div>
    <span class="child2">Fixed</span>
</div>

3
2018-02-10 11:43



.container {
    width: 250px;
    height: 40px;
    border: 1px solid read;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    transform: scaleX(-1);
}

span {
   height: 50px;
   display: inline-block;
   transform: scaleX(-1);
}

.child1 {
    background: pink;
    width: 50px;
    margin-left: -50px;
    float: left;
    transition: margin-left .3s;
    text-align: left;
}

.child2 {
   background: #####;
}

.container:hover .child1 {
    margin-left: 0;
}
<div class="container">
    <span class="child1">Fixed</span>
    <span class="child2">Dynamic Width</span>
</div>

<div class="container">
    <span class="child1">Fixed</span>
    <span class="child2">Here is  Dynamic Width box</span>
</div>


-1
2018-04-23 09:06