W poniższym kodzie mam 3 obrazy z podpisemponiżej niektórych zdjęć. Nie chcę, aby szerokość tekstu przekraczała szerokość obrazu UWAGA: szerokość zdjęć może się różnić Nie jest to stała szerokość Jeśli tekst przekracza szerokość obrazu, tekst musi zawijać Innym problemem, który mam w poniższym kodzie, jest to, że drugi i trzeci obraz pokazuje trochę dopełnienia u dołu obrazu. Obramowanie wokół tego obrazu nie powinno mieć wypełnienia.
http://jsfiddle.net/AndroidDev/Asu7V/15/
<div style="width:300px; overflow-x: auto;white-space: nowrap;">
<div style="vertical-align:top">
<div class="x">
<img src="/images/http://25.media.tumblr.com/avatar_dae559818d30_128.png" />
<div style="white-space:wrap">Grumpy Cat is a famous cat</div>
</div>
<div class="x">
<img src="/images/http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" />
<img src="/images/http://playgo.ro/wp-content/themes/play3.0/play.png" style="position:absolute; left:0; top:0" />
</div>
<div class="x">
<img src="/images/http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" />
</div>
</div>
</div>
Odpowiedzi:
1 dla odpowiedzi № 1Ponieważ nie przypisujesz żadnych width dla Twojej div element, więc przypisz go, a następnie użyj white-space: normal;
<div style="white-space: normal; width: 130px;">Grumpy Cat is a famous cat</div>
Ponownie, chciałbym Cię ostrzec, że unikaj używania wbudowanych stylów ..
Ponadto, po naprawieniu opakowania div który zawiera tylko obraz, lepiej go użyć max-width i max-height dla Twojego img więc zapewni, że wygra overflow.
Ponadto, ostatni, ale nie najmniej, należy rozważyć użycie p element zamiast div co nada twemu tekstowi znaczenie semantyczne.
Używałeś white-space: wrap; gdzie wrap nie jest poprawną wartością dla white-space własność, więc będziesz potrzebować normal
Jak skomentowałeś, chcesz pozbyć się białego spacji po obu stronach, więc w tym celu napraw element opakowania, przypisując pewne stałe width do elementu opakowania i do białej przestrzeni poniżej problemu z obrazem można naprawić, używając albo font-size: 0; na opakowaniu elementu i przypisanie niektórych font-size do tekstu lub lepszym sposobem jest użycie display: block; dla Twojego img element.
0 dla odpowiedzi nr 2
Prostym sposobem na zrobienie tego będzie zawijanie obrazu itekst w jednym dziale, aby po zwiększeniu rozmiaru obrazu zapewniał on ten sam obszar dla tekstu i nie wykroczył poza obraz.
0 dla odpowiedzi № 3
Brakuje twojej szerokości css, tutaj jest wersja demo: PRÓBNY
HTML
<div style=""><span class="text">Grumpy Cat is a famous cat</span>
CSS
.text {
vertical-align:top;
display:inline-block;
white-space:normal;
word-wrap: break-word;
width:70%;
max-width:70%;
}
.x {
border:1px solid #000000;
display:inline-block;
white-space:nowrap;
position:relative;
width:42%;
vertical-align: top;
}