Hejsa
Jeg har en lille udfordring jeg ikke helt kan få løst, som en af jer sikkert kan hjælpe mig med.
Der er en overskrift, et billede og en beskrivelse ved siden af.
Lidt ligesom i en shop er der en overskrift på varen, et billede og måske en pris under billedet og så en tekst til højre for.
Mit problem er at jeg gerne vil lave text-wrapping således at når brugeren gør vinduet mindre så tilpasser teksten sig selv i længden og wrapper og bare udvider sig vertikalt når vinduet bliver mindre og horisontalt når det bliver større.
Hvis jeg sætter min- og max-width på i % så fungerer det stadig ikke medmindre jeg selv sætter <br /> ind i teksten.
Ville gerne have den selv bare flytter dem til næste linie.
Min kode er som følger:
- <div class="type-line">
- <div class="section-titel">
- <a name="Anchor1">
- <h4 class="header">TITEL GOES HERE</h4>
- </a>
- </div>
- <div>
- <div class="image-section">
- <img class="line-image" src="thumb.jpg" />
- <div>Varen er udsolgt</div>
- <div>Prisen er meget høj</div>
- </div>
- <div class="text-section">
- <p class="description-text">Her skal der blive ved med at komme en ufattelig lang, dum og irriterende beskrivende tekst som ingen alligevel gider at læse overhovedet vel? </p>
- </div>
- </div>
- </div>
- .type-line {
- min-height: 200px;
- background-color: #0ff;
- border: 2px solid red;
- }
-
- .section-titel {
- width: 100%;
- }
-
- .image-section {
- display: inline-block;
- max-width: 200px;
- }
-
- img.line-image {
- border: 1px solid #b8d30b;
- padding: 2px;
- min-width: 100px;
- max-width: 175px;
- display: inline-block;
- }
-
- .text-section {
- display: inline-block;
- vertical-align: top;
- max-width: 80%;
- max-width: 800px;
- min-width: 30%;
- }
-
- p.description-text {
- background-color: #ff6a00;
- display: inline-block;
- vertical-align: top;
- padding: 0px;
- margin: 0px;
- text-wrap: normal;
- }