Mam następujące znaczniki:
<li id="CN2787">
<img class="fav_star" src="images/fav.png">
<span>Text, text and more text</span>
</li>
Chcę, aby tekst zawijał się, nie trafiał do „kolumny” obrazu. Wiem, że mogę to zrobić za pomocą table
(co robiłem), ale z tego powodu nie jest to wykonalne .
Próbowałem następujących bez powodzenia:
li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}
Ja też próbowałem float: right
.
Dzięki.
EDYCJA: chcę, żeby wyglądało to tak:
IMG Text starts here and keeps going... and
wrap starts here.
Nie tak jak to:
IMG Text starts here and keeps going... and
wrap starts in the space left for the image.
white-space: nowrap;
wli span {...}
, ale mam wrażenie, że staramy się robić coś innegoOdpowiedzi:
Plik
span
Element jest elementem inline, nie można zmienić jego szerokość w CSS.Możesz dodać następujący CSS do swojego zakresu, abyś mógł zmienić jego szerokość.
display: block;
Innym sposobem, który zwykle ma większy sens, jest użycie
<p>
elementu jako rodzica dla twojego<span>
.<li id="CN2787"> <img class="fav_star" src="images/fav.png"> <p> <span>Text, text and more text</span> </p> </li>
Ponieważ
<p>
jestblock
elementem, możesz ustawić jego szerokość za pomocą CSS, bez konieczności zmiany czegokolwiek.Ale w obu przypadkach, ponieważ masz teraz element blokowy, będziesz musiał przesunąć obraz tak, aby cały tekst nie znalazł się pod obrazem.
li p{width: 100px; margin-left: 20px} .fav_star {width: 20px;float:left}
PS Zamiast
float:left
na obrazie, można również umieścićfloat:right
nali p
ale w takim przypadku konieczne będzie takżetext-align:left
prawidłowo wyrównać tekst.PSS Jeśli zdecydowałeś się na pierwsze rozwiązanie polegające na nie dodawaniu
<p>
elementu, twój CSS powinien wyglądać tak:li span{width: 100px; margin-left: 20px;display:block} .fav_star {width: 20px;float:left}
źródło
span
dop
elementu. Wtedy właśnie te dwa wydawał się rade:li p {margin-left: 40px} .fav_star {float: left}
. Szerokość obrazu jest ustalana przez sam obraz,p
element jest automatycznie a,block
a szerokość zostawiłem samą. Dzięki za to.display:block
, równie dobrze możesz użyć a,div
ponieważ do tego służy (lub użyj a,p
jak również sugerujesz). Nie ma potrzeby podwójnego zawijania tekstu - jeśli używasz ap
, możesz zgubićspan
.div
, w tym przypadku, ap
ma więcej sensu. Utrataspan
jest dla mnie banalna i zależy od tego, jak układasz swoje treści.<span>
w sposób<p>
to czary prosto z Hogwartz! Działa pięknie!Bardzo prosta odpowiedź na ten problem, który wydaje się łapać wiele osób:
<img src="url-to-image"> <p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p> img { float: left; } p { overflow: hidden; }
Zobacz przykład: http://jsfiddle.net/vandigroup/upKGe/132/
źródło
span
(przypadek OP). Potrzebnydisplay: block
byłby plikspan
. Ale oszczędzając to, zgadzam się, że jest to znacznie bardziej eleganckie rozwiązanie. Jeśli ktoś się zastanawia, na czym polega magiaoverflow: hidden
, zobacz moją odpowiedź poniżej.Dla tych, którzy chcą uzyskać dodatkowe informacje, oto krótki artykuł wyjaśniający, dlaczego
overflow: hidden
działa. Ma to związek z tak zwanym kontekstem formatowania bloków . Jest to część specyfikacji W3C (tj. Nie jest to hack) i jest to w zasadzie obszar zajmowany przez element z przepływem typu blokowego.Za każdym razem, gdy jest stosowany,
overflow: hidden
tworzy nowy kontekst formatowania bloku. Ale to nie jedyna właściwość, która może wywołać takie zachowanie. Cytując prezentację Fiony Chan z Sydney Web Apps Group:źródło
Jeśli chcesz,
margin-left
aby działał nadspan
elementem, musisz to zrobićdisplay: inline-block
lubdisplay:block
też.źródło
vertical-align: top;
na obrazie również z tym.ustawienie
display:flex
tekstu zadziałało dla mnie.źródło
overflow:auto
. Jestem pewien, że nie działa dokładnie tak samo we wszystkich sytuacjach, ale zadziałał również dla mnie.Owiń element DIV wokół obrazu i zakresu i dodaj do CSS w ten sposób:
HTML
<li id="CN2787"> <div><img class="fav_star" src="images/fav.png"></div> <div><span>Text, text and more text</span></div> </li>
CSS
#CN2787 > div { display: inline-block; vertical-align: top; } #CN2787 > div:first-of-type { width: 35%; } #CN2787 > div:last-of-type { width: 65%; }
MNIEJ
#CN2787 { > div { display: inline-block; vertical-align: top; } > div:first-of-type { width: 35%; } > div:last-of-type { width: 65%; } }
źródło