Xuddi shu yo'nalishda uchta div tasvirini qanday saqlash kerak?

Men bir xil satrda uchta alohida yuvarlangan tasvirni yaratishga harakat qilaman. Men ikkita pozitsiyani egallashga muvaffaq bo'ldim, lekin oxirgi chiziqni to'g'ri chiziqqa ko'tarishim mumkin emas.

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

.wrap {
  width: 100%;
}

.image-left {
  content: url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
  height: 250px;
  float: left;
  padding-left: 10%;
}

.image-centre {
  content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
  height: 250px;
  margin-left: auto;
  margin-right: auto;
}

.image-right {
  content: url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
  height: 250px;
  float: right;
  padding-right: 10%;
}
<div class="wrap">
  <div class="image-left"></div>
  <div class="image-centre"></div>
  <div class="image-right"></div>
</div>
</div> </div>

This is what it ends up looking like

1

12 javoblar

There's probably a better way to do this, but here's one that works: https://jsfiddle.net/5ybLh6vy/

<div class="wrap">
    <div class="image-left">
        
    </div>
    <div class="image-centre">
        
    </div>
    <div class="image-right">
        
    </div>
</div>
.wrap {
  width: 100%;
  display: table;
}

.wrap img {
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
}

.image-left, .image-centre, .image-right {
  display: table-cell;
  width: 33%;
}
2
qo'shib qo'ydi

There's probably a better way to do this, but here's one that works: https://jsfiddle.net/5ybLh6vy/

<div class="wrap">
    <div class="image-left">
        
    </div>
    <div class="image-centre">
        
    </div>
    <div class="image-right">
        
    </div>
</div>
.wrap {
  width: 100%;
  display: table;
}

.wrap img {
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
}

.image-left, .image-centre, .image-right {
  display: table-cell;
  width: 33%;
}
2
qo'shib qo'ydi

Barcha rasmlaringiz uchun float: left; belgisini belgilashingiz mumkin va keyin to'g'ri burchalarni belgilashingiz mumkin.

1
qo'shib qo'ydi

Barcha rasmlaringiz uchun float: left; belgisini belgilashingiz mumkin va keyin to'g'ri burchalarni belgilashingiz mumkin.

1
qo'shib qo'ydi

Ularning barchasi to'g'ri tartibda bo'lishini istasangiz, ularning barchasiga yoki .wrap sinfiga float: left; ni kiritishingiz kerak bo'ladi, display: inline; har bir tasvirga eng yaxshi echim deb bilaman. Muammo shundaki, agar ko`rish nuqtasi etarlicha keng bo'lmasa, keyingi qatorga suriladi.

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

.wrap {
  width: 100%;
  float: left;
}

.image-left {
  content:url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
  height: auto;
  max-width: 25%;
  padding-left: 10%;
  display:inline;
}

.image-centre {
  content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
  max-width: 25%;
  height:auto;
  display:inline;
}

.image-right {
  content:url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
  height: auto;
  max-width: 25%;
  display:inline;
  padding-right: 10%;

}
<div class="wrap">
    <div class="image-left"></div>
    <div class="image-centre"></div>
    <div class="image-right"></div>
  </div>
</div> </div>
0
qo'shib qo'ydi
Kod parchasi ishlamaydi. : - /
qo'shib qo'ydi muallif Zeth, manba
Bu so'ragan narsa emas.
qo'shib qo'ydi muallif Zeth, manba
Yaxshi! :-) Yaxshi ko'rinadi.
qo'shib qo'ydi muallif Zeth, manba
To'liq sahifani bosing
qo'shib qo'ydi muallif Geoff Taylor, manba
Ularning barchasini bitta qatorga qo'yish kerakligini so'radi. Hajmi o'lchamsiz holda, ushbu ko'rinishdagi ko'rinishda hech qanday usul yo'q. U balandlikda xohlagan uslubda balandlikni o'rnatganidan beri o'yladim. Lekin, uni manzarani o'lchamidan qat'iy nazar ishlashga majbur qildim, uni dastlab oldindan o'rnatilgan tasvir o'lchamlari uchun qay tarzda o'zgartirishim kerak. balandlikni 250px ga o'zgartirish va max-widthni olib tashlash.
qo'shib qo'ydi muallif Geoff Taylor, manba

Ularning barchasi to'g'ri tartibda bo'lishini istasangiz, ularning barchasiga yoki .wrap sinfiga float: left; ni kiritishingiz kerak bo'ladi, display: inline; har bir tasvirga eng yaxshi echim deb bilaman. Muammo shundaki, agar ko`rish nuqtasi etarlicha keng bo'lmasa, keyingi qatorga suriladi.

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

.wrap {
  width: 100%;
  float: left;
}

.image-left {
  content:url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
  height: auto;
  max-width: 25%;
  padding-left: 10%;
  display:inline;
}

.image-centre {
  content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
  max-width: 25%;
  height:auto;
  display:inline;
}

.image-right {
  content:url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
  height: auto;
  max-width: 25%;
  display:inline;
  padding-right: 10%;

}
<div class="wrap">
    <div class="image-left"></div>
    <div class="image-centre"></div>
    <div class="image-right"></div>
  </div>
</div> </div>
0
qo'shib qo'ydi
Kod parchasi ishlamaydi. : - /
qo'shib qo'ydi muallif Zeth, manba
Bu so'ragan narsa emas.
qo'shib qo'ydi muallif Zeth, manba
Yaxshi! :-) Yaxshi ko'rinadi.
qo'shib qo'ydi muallif Zeth, manba
To'liq sahifani bosing
qo'shib qo'ydi muallif Geoff Taylor, manba
Ularning barchasini bitta qatorga qo'yish kerakligini so'radi. Hajmi o'lchamsiz holda, ushbu ko'rinishdagi ko'rinishda hech qanday usul yo'q. U balandlikda xohlagan uslubda balandlikni o'rnatganidan beri o'yladim. Lekin, uni manzarani o'lchamidan qat'iy nazar ishlashga majbur qildim, uni dastlab oldindan o'rnatilgan tasvir o'lchamlari uchun qay tarzda o'zgartirishim kerak. balandlikni 250px ga o'zgartirish va max-widthni olib tashlash.
qo'shib qo'ydi muallif Geoff Taylor, manba

Buni flexbox bilan qilishingiz mumkin, shuningdek, inline rasmlardan foydalanishni tavsiya etaman.

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

.wrap {
  display: flex;
  background-color: crimson;
  padding: 5% 10%;
}
.wrap div {
  flex: 1;
  text-align: center;
}
.wrap img {
  max-width: 90%;
  height: auto;
}
<div class="wrap">
  <div class="image-left">
    
  </div>
  <div class="image-centre">
    
  </div>
  <div class="image-right">
    
  </div>
</div>
</div> </div>
0
qo'shib qo'ydi

Buni flexbox bilan qilishingiz mumkin, shuningdek, inline rasmlardan foydalanishni tavsiya etaman.

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

.wrap {
  display: flex;
  background-color: crimson;
  padding: 5% 10%;
}
.wrap div {
  flex: 1;
  text-align: center;
}
.wrap img {
  max-width: 90%;
  height: auto;
}
<div class="wrap">
  <div class="image-left">
    
  </div>
  <div class="image-centre">
    
  </div>
  <div class="image-right">
    
  </div>
</div>
</div> </div>
0
qo'shib qo'ydi

Barcha divslarning uchini o'ngga aylantiring, ularni kenglik qiling: 33,33% va quti o'lchamlari: chegara quti.

Bu satr ichidagi uchta tekis joylashtirilgan tasvirni yaratadi.

0
qo'shib qo'ydi

Barcha divslarning uchini o'ngga aylantiring, ularni kenglik qiling: 33,33% va quti o'lchamlari: chegara quti.

Bu satr ichidagi uchta tekis joylashtirilgan tasvirni yaratadi.

0
qo'shib qo'ydi

Tasvir yorlig'ini ishlatish va ularni shu kabi divlarga o'rash haqida nima deyish mumkin?

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

.wrap {
  width: 100%;
}
.image-wrapper{
  width: 33%;
  display: inline-block;
  text-align: center;
}
.image-wrapper>img{
  height:250px;
}
<div class="wrap">
    <div class="image-wrapper">
       
    </div>
    <div class="image-wrapper">
       
    </div>
    <div class="image-wrapper">
       
    </div>
</div>
</div> </div>
0
qo'shib qo'ydi

Tasvir yorlig'ini ishlatish va ularni shu kabi divlarga o'rash haqida nima deyish mumkin?

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

.wrap {
  width: 100%;
}
.image-wrapper{
  width: 33%;
  display: inline-block;
  text-align: center;
}
.image-wrapper>img{
  height:250px;
}
<div class="wrap">
    <div class="image-wrapper">
       
    </div>
    <div class="image-wrapper">
       
    </div>
    <div class="image-wrapper">
       
    </div>
</div>
</div> </div>
0
qo'shib qo'ydi