Rasm ta'rifi kengligi

Menda tasvirlangan tasvirni o'z ichiga olgan maqola bor. Deklaratsiya tasvirdan uzoq bo'lishi kerak. Tasvirning kengligi har xil bo'lishi mumkin, shuning uchun men sinfni sozlay olmayapman .artikle-tasvirni sobit kenglikda (masalani hal qiladigan narsa).

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

article {
  width: 600px;
  margin: 0 auto;
}

.leadtext {
  font-weight: 600;
  margin-bottom: 10px;
}

.article-image {
  float: left;
  margin: 0 10px 10px 0;
}

.article-image img {
  display: inline-block;
}

.article-image>div {
  font-size: 0.8em;
  font-style: italic;
}

Headline

<div class="leadtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div> <div> <div class="article-image"> <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr | © author</div> </div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</div> </div>

http://codepen.io/DaFunkyAlex/pen/mWMVdz

3

8 javoblar

It's called

with

You can add a caption to an Image by putting it inside a
tag and adding the
, which can then include

tags, etc.. The

tag is used to section content. Figures can also be used to display code snippets distinguished from other content. <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">
/* Should you want to center the caption:
figure {
    display: inline-block;
}
figure img {
    vertical-align: top;
}
figure figcaption {
    text-align: center;
}*/

A doge above a very long text with Lorem Ipsum
</div> </div>

3
qo'shib qo'ydi

Biroz noan'anaviy bo'lsa-da, sof CSS hal mavjud. Hujayralarning kengligini hisoblash uchun display: table dan foydalaniladi.

Rasm dinamik hajmga ega bo'lishi mumkin. Rasm hajmi Image kattaligiga qadar o'sib boradi va agar kerak bo'lsa, yangi bosqichlarni egallaydi.

On .article-image add: display:table;.
On .article-image > div add display: table-caption; and caption-side: bottom;

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

article {
  width: 600px;
  margin: 0 auto;
}

.leadtext {
  font-weight: 600;
  margin-bottom: 10px;
}
.article-image {
  float: left;
  margin: 0 10px 10px 0;
  display: table;
}

.article-image img {
  display: inline-block;
}

.article-image > div {
  font-size: 0.8em;
  font-style: italic;
  display: table-caption;
  caption-side: bottom;
}

Headline

<div class="leadtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div> <div> <div class="article-image"> <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr | © author</div> </div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</div> </div>

2
qo'shib qo'ydi

muqobil - CSS-da img-tegdan foydalanish

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

article {
  width: 600px;
  margin: 0 auto;
}
img{
  width: 350px;
}

.leadtext {
  font-weight: 600;
  margin-bottom: 10px;
}
.article-image {
  float: left;
  margin: 0 10px 10px 0;
}

.article-image img {
  display: inline-block;
}

.article-image > div {
  font-size: 0.8em;
  font-style: italic;
}

Headline

<div class="leadtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div> <div> <div class="article-image"> <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr | © author</div> </div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</div> </div>

1
qo'shib qo'ydi

Ushbu kodni sinab ko'ring ......

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

* {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

article {
  width: 600px;
  margin: 0 auto;
}

.leadtext {
  font-weight: 600;
  margin-bottom: 10px;
}

.article-image {
  float: left;
  margin: 0 10px 10px 0;
}

.article-image img {
  display: inline-block;
}

figcaption {
  text-align: center;
  font-size: 10px;
  word-wrap: break-word;
  max-width:140px;
}

.article-image>div {
  font-size: 0.8em;
  font-style: italic;
}

Headline

<div class="leadtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div> <div>
Lorem ipsum dolor sit amet,consetetur sadipscing elitr | © author

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ipsum, sed sit rerum aut cum ducimus odio dignissimos! Obcaecati quaerat, provident fugiat assumenda inventore dolore laudantium praesentium minima nulla aperiam! Ea nihil laudantium delectus eius iusto voluptatibus beatae pariatur, ducimus, ratione voluptatem. Unde perferendis laboriosam neque, soluta ducimus, maiores. Necessitatibus nihil, eaque harum temporibus qui autem earum beatae placeat numquam ab possimus dolores voluptatum fugiat expedita maxime consectetur est veniam esse minima odio saepe, doloremque dolorum repudiandae eum. Obcaecati possimus nostrum, eveniet culpa, ullam neque omnis adipisci magni consectetur esse accusantium suscipit amet repudiandae eos assumenda, iste blanditiis, aperiam aut!

</div> </div>

1
qo'shib qo'ydi
Bundan tashqari text-align xususiyatidan foydalanishingiz mumkin!
qo'shib qo'ydi muallif Momin, manba
Maksimal kengligi rasmga mutanosib qo'yib, bu muammoni hal qiladi!
qo'shib qo'ydi muallif Momin, manba
Kodingizda siz joy egasi rasmining kengligi va bo'yi 100px dan foydalanasiz va ushlayotgan matnning kengligi va bo'yi 140px foydalanasiz, shuning uchun taglik matnini bir xil hizalamak va ushlab qolish uchun rasm kengligim kabi figcaption kengligi va balandligini saqlayman matnni hizalamak: markaz ishlatiladi. Men javobimni qabul qilasiz deb umid qilaman
qo'shib qo'ydi muallif Momin, manba
siz rasmning maksimal kengligi 140px ga o'rnatdingiz. Aslida tasvirning kengligini bilmayman.
qo'shib qo'ydi muallif DaFunkyAlex, manba
O'zingizning kodingizda qo'lda ko'rsatilgandirsiz. Siz shrift hajmini oshirsangiz yoki tavsifni o'zgartirsangiz, bu buziladi
qo'shib qo'ydi muallif Kornel Dylski, manba

yangilash

@Lars javobiga ko'ra: taglavhada joylashgan display: table-caption hech narsa qilmasdan yechimdir.

Original

I think there is no way to do it, without counting in JS or assumption size. In my opinion, the best solution would be, to assume number of lines in description

Agar sizning tavsifingiz qanchalik ko'p satrlarni bilsangiz, unda siz uchun qattiq (em) bilan to'ldirish mumkin. Va pozitsiyasi: mutlaq .

2 yo'nalishli sobit o'rnak

.article-image {
  float: left;
  position: relative;
  margin-right: 10px;
  font-size: 0.8em;
  font-style: italic;
  padding-bottom: 2em;  
}

.article-image > div {
  position: absolute;
  bottom: 0;
}

Bu tor tasvirlar uchun ishlamaydi, chunki ta'riflar tor va ko'p satrlarga ega bo'ladi. Lekin, siz 1 satrga 1 ta so'z kerak emas deb o'ylayman.

1
qo'shib qo'ydi
Sof CSS yechimlari albatta mumkin, mening javobimga qarang.
qo'shib qo'ydi muallif Lars, manba

Faqat ikkalasi bo'lgan divga kenglik kiritishingiz kerak

.article-image {
  width:100px;
  float: left;
  margin: 0 10px 10px 0;
}
1
qo'shib qo'ydi
OSh kengligi dinamik ekanligi haqida aniq aytadi
qo'shib qo'ydi muallif mehulmpt, manba

Muammo shundaki, sizning div rasm kengligini bilmaydi. Biroq siz istagan narsaga erishish uchun oddiy javascriptni hisoblashingiz mumkin:

var divs = document.querySelectorAll('.article-image');
for(i = 0;i<divs.length;i++) {
  var imgW = divs[i].querySelector('img').width;
  divs[i].querySelector('div').style.width = imgW+'px';
}

http://codepen.io/anon/pen/qrXbJJ

0
qo'shib qo'ydi

Men ochiq-oydin rasm o'lchamiga ega bo'lmasligingiz uchun CSS-dan foydalanib bo'lmaydi, deb qo'rqaman. Men biroz JS taklif qilaman:

var images = document.querySelectorAll(".article-image"),
    i = 0, ii = images.length;
for(i; i

http://codepen.io/anon/pen/NpvxON

0
qo'shib qo'ydi
Moar jQuery'dan foydalaning
qo'shib qo'ydi muallif RaisingAgent, manba
Aniq CSS-ni hal qilish mumkin, mening javobimni ko'ring.
qo'shib qo'ydi muallif Lars, manba