DIV manipulyatsiyasi

Bu juda oddiy va yangi savol.  Men asosiy HTMLni o'rgana boshladim va 3 divni boshqa tartibda bir joyga to'plashga harakat qilayotib, men siqildim.   Menga 3 ta DIV elementi kerak: Birinchisi chap tomonga o'tishi kerak va u bosh barmog'i uchun DIV bo'ladi. Ikkinchisi o'ng tomonga o'tishi kerak, 5px hajmida to'ldirilgan chap-o'ng parametrga ega bo'lishi kerak, keyin uchinchi bo'linma ikkinchi divning ostiga qo'yilishi kerak va ikkala Divsning balandligi ham birinchi div bosh barmog'i (50x50px) bilan mos kelishi kerak.

Mana mening kodim, men yaratishga harakat qilardim, lekin hech qanday muvaffaqiyatga erishmadim.

    <div style="width: 500px;">
        <div style="float: left;">
            
        </div>
        <div style="padding-left:10px; width:100px;">top</div>
        <div style="float: left; padding-left:10px; width:100px;">bottom</div>
    </div>

Men buni Jadval bilan qanday hal qilishni bilaman, lekin DIV bilan uni o'zimning yangi narsalarim bilan hal qila olmadim.

0
Qutisidagi model qanday ishlashini o'rganishingiz kerak.
qo'shib qo'ydi muallif clu3Less, manba
Qutisidagi model qanday ishlashini o'rganishingiz kerak.
qo'shib qo'ydi muallif clu3Less, manba
qo'shib qo'ydi muallif domsson, manba

8 javoblar

Shunga o'xshash,

<div style="width: 500px;display:flex;">
    <div style="float: left;flex:1;">
        
    </div>
    <div style="float: left;flex:1;">
        <div style="padding-left:10px; width:100px;">top</div>
        <div style="padding-left:10px; width:100px;">bottom</div>
    </div>
</div>

Note: Do not use inline styles.

0
qo'shib qo'ydi
Rahmat! Juda ham minnatdorman. Katta bolalar va katta va tez yordam. Men har bir taklifdan o'rganib, mahoratimni oshiraman.
qo'shib qo'ydi muallif Carlos Florian, manba

Agar sizni chindan ham tushunsam, siz 3d div uchun mutlaq joylashuvga muhtojsiz.

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

<div style="width: 500px;position:relative;">
 <div style="float: left;"></div>
  

 <div style="padding-left:10px; width:100px;float:right;height:25px;">top</div>
 
 <div style="padding-left:10px; width:100px;position:absolute;top:25px;right:0;">bottom</div>
 </div>
</div> </div>
0
qo'shib qo'ydi
Va yana, vaqt uchun juda minnatdorman :) Juda foydali!
qo'shib qo'ydi muallif Carlos Florian, manba

Agar sizni chindan ham tushunsam, siz 3d div uchun mutlaq joylashuvga muhtojsiz.

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

<div style="width: 500px;position:relative;">
 <div style="float: left;"></div>
  

 <div style="padding-left:10px; width:100px;float:right;height:25px;">top</div>
 
 <div style="padding-left:10px; width:100px;position:absolute;top:25px;right:0;">bottom</div>
 </div>
</div> </div>
0
qo'shib qo'ydi
Va yana, vaqt uchun juda minnatdorman :) Juda foydali!
qo'shib qo'ydi muallif Carlos Florian, manba

Ushbu vazifa uchun flexbox dan foydalanishingiz mumkin. Barcha div'lar avatarning balandligiga mos keladi va ularni osongina qayta tartibga solishingiz mumkin, shunda siz sezgir tartibga ega bo'lishingiz mumkin

Misol kodekasi


Belgilash

<div class="wrap">
    <div class="wrap__avatar">
       
    </div>
    <div class="wrap__column">
       Column (100px left padding)
    </div>
    <div class="wrap__main">
        Main (5px left padding)
    </div>
</div>  

CSS (compiled from SCSS)

.wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}

.wrap__avatar {
  order: 1;
}

.wrap__main {
  padding-left: 5px;
  flex: 1;
  order: 2;
}

.wrap__column {
  width: 200px;
  padding-left: 100px;
  order: 3;
}

.wrap > div {
  box-sizing: border-box;
}
0
qo'shib qo'ydi
Qanday ajoyib vosita! Ko'p rahmat. Faqat o'qishni boshladingiz!
qo'shib qo'ydi muallif Carlos Florian, manba

Men sizning savolingiz bilan ozgina aralashib qoldim, lekin umid qilamanki, bu sizga yordam beradi ...

I would wrap the thumb div in its own wrapper and then wrap the second 2 div's together in another wrapper and float the wrappers to the left. As follows:

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

* {
  box-sizing: border-box;
}
.wrapper > .left, .wrapper > .right {
  float: left;
}
.left {
  width: 50px;
  height: 50px;
}
.right .top, .right .bottom {
  height: 25px;
  width: 100px;
  padding-left: 5px;
}
.right .top {
  background-color: yellow;
}
.right .bottom {
  background-color: red;
}
<div class="wrapper">
  <div class="left">
    
  </div>
  <div class="right">
    <div class="top">
    </div>
    <div class="bottom">
    </div>
  </div>
</div>
</div> </div>
0
qo'shib qo'ydi
Bu ajoyib yechim edi! Ko'p rahmat :) Men undan saboq olaman
qo'shib qo'ydi muallif Carlos Florian, manba
@CarlosFlorian hech qanday muammo, yordam berishga xursand :-)
qo'shib qo'ydi muallif David Wilkinson, manba

Men sizning savolingiz bilan ozgina aralashib qoldim, lekin umid qilamanki, bu sizga yordam beradi ...

I would wrap the thumb div in its own wrapper and then wrap the second 2 div's together in another wrapper and float the wrappers to the left. As follows:

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

* {
  box-sizing: border-box;
}
.wrapper > .left, .wrapper > .right {
  float: left;
}
.left {
  width: 50px;
  height: 50px;
}
.right .top, .right .bottom {
  height: 25px;
  width: 100px;
  padding-left: 5px;
}
.right .top {
  background-color: yellow;
}
.right .bottom {
  background-color: red;
}
<div class="wrapper">
  <div class="left">
    
  </div>
  <div class="right">
    <div class="top">
    </div>
    <div class="bottom">
    </div>
  </div>
</div>
</div> </div>
0
qo'shib qo'ydi
Bu ajoyib yechim edi! Ko'p rahmat :) Men undan saboq olaman
qo'shib qo'ydi muallif Carlos Florian, manba
@CarlosFlorian hech qanday muammo, yordam berishga xursand :-)
qo'shib qo'ydi muallif David Wilkinson, manba

Bu sizning muammoingizni hal qilishi kerak:

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

    <div style="width: 500px;">
       <div style="float: left;">
         
       </div>
       <div style="float:right;">
         <div style="padding-left:10px; width:100px; height: 25px;">top</div>
         <div style="padding-left:10px; width:100px; height: 25px;">bottom</div>
       </div>
    </div>
</div> </div>

Eng oson yo'li - kontaktingizni guruhlash. Chap kontent va bitta o'ng uchun bitta DIV. Har bir div o'z o'rnini egallaydi. Shunday ekan, bu divs ichida elementni joylashtirishga hojat yo'q. Shu tarzda, elementlaringizni guruhlar ichida mustaqil ravishda loyihalashtirish uchun ko'proq erkinlik mavjud.

Va uslublar sinfidan foydalanish haqida nima deyish mumkin? Bu sizning kodingizni yanada o'qiydi va tezroq bajaradi.

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

.master {
  width: 500px;
}

.thumb {
  float: left;
}

.thumb img {
  width: 50px;
  height: 50px;
}

.description {
  float: right;
}

.description > div {
  padding-left:  10px;
  width: 100px;
  height: 25px;
}
<div class="master">
   <div class="thumb">
     
   </div>
   <div class="description">
     <div>top</div>
     <div>bottom</div>
   </div>
</div>
</div> </div>
0
qo'shib qo'ydi
Rahmat! Kelajakda menga yordam beradi!
qo'shib qo'ydi muallif Carlos Florian, manba

Bu sizning muammoingizni hal qilishi kerak:

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

    <div style="width: 500px;">
       <div style="float: left;">
         
       </div>
       <div style="float:right;">
         <div style="padding-left:10px; width:100px; height: 25px;">top</div>
         <div style="padding-left:10px; width:100px; height: 25px;">bottom</div>
       </div>
    </div>
</div> </div>

Eng oson yo'li - kontaktingizni guruhlash. Chap kontent va bitta o'ng uchun bitta DIV. Har bir div o'z o'rnini egallaydi. Shunday ekan, bu divs ichida elementni joylashtirishga hojat yo'q. Shu tarzda, elementlaringizni guruhlar ichida mustaqil ravishda loyihalashtirish uchun ko'proq erkinlik mavjud.

Va uslublar sinfidan foydalanish haqida nima deyish mumkin? Bu sizning kodingizni yanada o'qiydi va tezroq bajaradi.

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

.master {
  width: 500px;
}

.thumb {
  float: left;
}

.thumb img {
  width: 50px;
  height: 50px;
}

.description {
  float: right;
}

.description > div {
  padding-left:  10px;
  width: 100px;
  height: 25px;
}
<div class="master">
   <div class="thumb">
     
   </div>
   <div class="description">
     <div>top</div>
     <div>bottom</div>
   </div>
</div>
</div> </div>
0
qo'shib qo'ydi
Rahmat! Kelajakda menga yordam beradi!
qo'shib qo'ydi muallif Carlos Florian, manba