Ruxsat etilgan elementning pozitsiyasi maximal kenglik oynasining kengligining 100% uchun qo'llanilmaydi

Menda "r-u-ok" idining elementi bor. Bu pop-up va uning tarkibida turli xil so'zlar bo'lishi mumkin.

Men aniq kenglik emas, balki faqat max-kenglikni o'rnatmoqchiman. Ruxsat etilgan kenglik kontentning so'zlar soniga o'zini moslasha olmaydi. Bundan tashqari, men vertikal vertikalni o'rta va gorizontal holatda markazga moslashtirishga umid qilaman.

Lekin 100% max-width atributiga o'rnatgan bo'lsam ham, uning maksimal kengligi derazaning kengligi emas, lekin u ko'p so'zlarni o'z ichiga oladi.

NEGA?

Kambag'al ingliz tilayman.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#r-u-ok {
  position: fixed;
  /* display: none; */
  max-width: 70%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: 99;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  font-size: 16px;
}
<div id="r-u-ok">
  I think it should 100% width of this window, if the word more enough.
</div>
</div> </div>

Here is an example: fiddle link

2
kenglik qo'shish: 100%.
qo'shib qo'ydi muallif Sahil Dhir, manba
kenglik qo'shish: 100%.
qo'shib qo'ydi muallif Sahil Dhir, manba
Hey @XheldonCao! Endi sizning savolingizga shubha qilmoqchisiz, kengligi 100% ga o'rnatmoqchimisiz yoki <div> sizning kontentingizga moslashni xohlaysizmi?
qo'shib qo'ydi muallif AymDev, manba
Hey @XheldonCao! Endi sizning savolingizga shubha qilmoqchisiz, kengligi 100% ga o'rnatmoqchimisiz yoki <div> sizning kontentingizga moslashni xohlaysizmi?
qo'shib qo'ydi muallif AymDev, manba
To'g'ri tushunsam, pop-up kengligi faqatgina 100% kengligida etarli tarkibga ega bo'lishini xohlaysizmi?
qo'shib qo'ydi muallif Pascal, manba
To'g'ri tushunsam, pop-up kengligi faqatgina 100% kengligida etarli tarkibga ega bo'lishini xohlaysizmi?
qo'shib qo'ydi muallif Pascal, manba

8 javoblar

Muammo shundaki, left: 50% bilan sistema, agar siz barcha narsalarni -50% ga tarjima qilsangiz ham, derazaning yarmini cheklashni istaydi. Shunday qilib, nima qilish kerak width aniq tarzda belgilanadi. Boshqa yo'l yo'q. Aks holda siz bu yarim bilan yopishib olasiz.

Yaxshiyamki, width: 100% - bu yagona yechim emas. Siz nima qilishingiz kerak bo'lsa, bu width: max-content Afsuski, bu barcha brauzerlarda ishlamaydi. IE va Edge mos kelmaydi. Biroq, ko'plab boshqalar, agar siz to'g'ri prefikslarni taqdim qilsangiz.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#r-u-ok {
  position: fixed;
  /* display: none; */
  max-width: 99%; /* changed */
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: 99;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  font-size: 16px;
  /* added */
  width:-webkit-max-content;
  width:-moz-max-content;
  width:max-content;
}
<div id="r-u-ok">
  I think it should 100% width of this window, if the word more enough.
</div>
</div> </div>
2
qo'shib qo'ydi
Qanchadan-qancha, max-content variantini bilmas edim
qo'shib qo'ydi muallif Pete, manba
ha! men buni xohlaganman! umid qilamanki, "max-content" standartlashtirilishi mumkin ... rahmat !!!
qo'shib qo'ydi muallif Xheldon Cao, manba

Muammo shundaki, left: 50% bilan sistema, agar siz barcha narsalarni -50% ga tarjima qilsangiz ham, derazaning yarmini cheklashni istaydi. Shunday qilib, nima qilish kerak width aniq tarzda belgilanadi. Boshqa yo'l yo'q. Aks holda siz bu yarim bilan yopishib olasiz.

Yaxshiyamki, width: 100% - bu yagona yechim emas. Siz nima qilishingiz kerak bo'lsa, bu width: max-content Afsuski, bu barcha brauzerlarda ishlamaydi. IE va Edge mos kelmaydi. Biroq, ko'plab boshqalar, agar siz to'g'ri prefikslarni taqdim qilsangiz.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#r-u-ok {
  position: fixed;
  /* display: none; */
  max-width: 99%; /* changed */
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: 99;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  font-size: 16px;
  /* added */
  width:-webkit-max-content;
  width:-moz-max-content;
  width:max-content;
}
<div id="r-u-ok">
  I think it should 100% width of this window, if the word more enough.
</div>
</div> </div>
2
qo'shib qo'ydi
Qanchadan-qancha, max-content variantini bilmas edim
qo'shib qo'ydi muallif Pete, manba
ha! men buni xohlaganman! umid qilamanki, "max-content" standartlashtirilishi mumkin ... rahmat !!!
qo'shib qo'ydi muallif Xheldon Cao, manba

Men sobit pozitsiyani hisobga olib, div oddiy hujjat oqimida bo'lgani kabi rivojlana olmaydi. Bunga erishish uchun qo'shimcha divdan foydalaning - tashqi divni joylashtirish uchun va ichki div uning tarkibida o'sishi mumkin:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#r-u-ok {
    position: fixed;
    width:100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    z-index: 99;
    text-align:center;
}
#r-u-ok > div {
    display: inline-block;
    max-width: 100%;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    font-size: 16px;
}
<div id="r-u-ok">
  <div>
  I think it should 100% width of this window, if the word more enough.
  </div>
</div>
</div> </div>

Yangiroq fiddle

2
qo'shib qo'ydi
Yaxshi. Bu hatto IEda ishlaydi, lekin meniki emas.
qo'shib qo'ydi muallif Mr Lister, manba
Ha ... bu yaxshi muvofiqlik va ajoyib yechim ... va @MrLister muvofiqligi e'tiborsizlik qilsangiz boshqa yo'l bor ... sizga juda ko'p rahmat! Men shuni yaxshi ko'raman! ;-)
qo'shib qo'ydi muallif Xheldon Cao, manba

Men sobit pozitsiyani hisobga olib, div oddiy hujjat oqimida bo'lgani kabi rivojlana olmaydi. Bunga erishish uchun qo'shimcha divdan foydalaning - tashqi divni joylashtirish uchun va ichki div uning tarkibida o'sishi mumkin:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#r-u-ok {
    position: fixed;
    width:100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    z-index: 99;
    text-align:center;
}
#r-u-ok > div {
    display: inline-block;
    max-width: 100%;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    font-size: 16px;
}
<div id="r-u-ok">
  <div>
  I think it should 100% width of this window, if the word more enough.
  </div>
</div>
</div> </div>

Yangiroq fiddle

2
qo'shib qo'ydi
Yaxshi. Bu hatto IEda ishlaydi, lekin meniki emas.
qo'shib qo'ydi muallif Mr Lister, manba
Ha ... bu yaxshi muvofiqlik va ajoyib yechim ... va @MrLister muvofiqligi e'tiborsizlik qilsangiz boshqa yo'l bor ... sizga juda ko'p rahmat! Men shuni yaxshi ko'raman! ;-)
qo'shib qo'ydi muallif Xheldon Cao, manba

Just add width:100%

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#r-u-ok {
  position: fixed;
  /* display: none; */
  width: 100%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: 99;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  font-size: 16px;
}
i have a demand, the element, which id is "r-u-ok",is a pop, has a several possibility of content's word count.it's judge by a ajax request's callback data. and i want the element only has a max-width, not a fixed width.a fixed width can't self-adaption
the content's word count, besides i also hope it is vertical align middle and horizontal align center. but, even i set 100% to max-width attribute, it's max-width still not the width of window, though it's contain many word. WHY?
<div id="r-u-ok">
  I think it should 100% width of this window, if the word more enough.
</div>
</div> </div>
0
qo'shib qo'ydi
Yo'q ... div o'z-o'zidan moslashuv, uning tarkibidagi so'z kerak ... baribir, rahmat!
qo'shib qo'ydi muallif Xheldon Cao, manba

Just add width:100%

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#r-u-ok {
  position: fixed;
  /* display: none; */
  width: 100%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: 99;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  font-size: 16px;
}
i have a demand, the element, which id is "r-u-ok",is a pop, has a several possibility of content's word count.it's judge by a ajax request's callback data. and i want the element only has a max-width, not a fixed width.a fixed width can't self-adaption
the content's word count, besides i also hope it is vertical align middle and horizontal align center. but, even i set 100% to max-width attribute, it's max-width still not the width of window, though it's contain many word. WHY?
<div id="r-u-ok">
  I think it should 100% width of this window, if the word more enough.
</div>
</div> </div>
0
qo'shib qo'ydi
Yo'q ... div o'z-o'zidan moslashuv, uning tarkibidagi so'z kerak ... baribir, rahmat!
qo'shib qo'ydi muallif Xheldon Cao, manba

Men bu divni to'liq kengligida ko'rsatishni xohlayman deb o'ylayman. Buni qilish uchun:

O'chirish

max-width: 70%;

Qo'shish

width: 100%;

YoKI

width: 100vw;
0
qo'shib qo'ydi
Yo'q, men divni o'z-o'zidan moslashishini xohlayman va derazaning maksimal kengligi bor ... baribir, rahmat
qo'shib qo'ydi muallif Xheldon Cao, manba

Men bu divni to'liq kengligida ko'rsatishni xohlayman deb o'ylayman. Buni qilish uchun:

O'chirish

max-width: 70%;

Qo'shish

width: 100%;

YoKI

width: 100vw;
0
qo'shib qo'ydi
Yo'q, men divni o'z-o'zidan moslashishini xohlayman va derazaning maksimal kengligi bor ... baribir, rahmat
qo'shib qo'ydi muallif Xheldon Cao, manba