Avatar billede hkb-x Nybegynder
23. maj 2009 - 17:43 Der er 8 kommentarer

billede rager ud af float div

Jeg har en calss med følgende style:
.element {
  background-color: white;

  width: 300px;

  margin: 0px 10px 20px 10px;
  padding: 10px;

  float: left;
  display: block;
}

Men hvis jeg passerer et billede i det så bliver div-elementet ved med at være det samme men billedet rager bare ud over. Hvordan kan jeg få div-elementet til at ændre størrelse hvis noget indhold ikke kan begrænses (den skal stadig kun være 300 bed hvis der er tekst)
Avatar billede roenving Novice
23. maj 2009 - 18:07 #1
Hvordan virker:

min-height:200px; ?-)
Avatar billede showsource Seniormester
23. maj 2009 - 18:11 #2
Hvad med
overflow: auto;
Avatar billede hkb-x Nybegynder
23. maj 2009 - 19:41 #3
med min-width så bliver alt 100% bredt da der er en mase tekst. med oveflow auto så blover overflow sat til scroll hvilket heller ikke er så heldigt.
Avatar billede hkb-x Nybegynder
23. maj 2009 - 20:10 #4
har ind til videre snyt lidt med jQuery (jquery.com):

  $(document).ready(function() {
    $('.element > img').each(function() {
      $(this).parent().width($(this).width());
    });;
  });


Hvor .element er de klasser der skal tilpasses i breden.
Avatar billede fusion-it Nybegynder
23. maj 2009 - 20:13 #5
margin: 0px 10px 20px 10px??

Hvad med height ?
Avatar billede hkb-x Nybegynder
23. maj 2009 - 21:05 #6
height skal justere sig efter indholdet så den ville jeg ikke sætte.
Avatar billede godskesen Nybegynder
27. maj 2009 - 22:06 #7
Prøv at sætte dit img{ float: left;} også.
Avatar billede mclemens Nybegynder
29. maj 2009 - 13:08 #8
Du kan desværre ikke sætte et element til en fastsat width og så få den til at udvide sig ved indsættelse af et billede (medmindre du laver det via. javascript). Hvis billedet skal forårsage en udvidelse af width skal teksten også.

Prøv f.eks. at udvide tekst mængden i nedenstående og eller indsætte et billede:

<div style="float:left;background:#555;">blabla blabla blabla blabla blabla blabla blabla bla</div>
... man kan selvfølgelig putte teksten indvendig i en ekstra div og have billedet for sig selv, men der er jo så ingen wrapping af teksten om billedet - men elementet vil stadig udvide sig

<div style="float:left;background:#555;"><div style="width:300px;">blabla blabla blabla blabla blabla blabla blabla bla blabla blabla bla  blabla blabla bla</div>billedebilledebilledebilledebilledebilledebilledebilledebillede </div>

- Den eneste løsning jeg kan komme m.h.t. textwrapping om billedet er at serverside måle billedet og så outputte en width definering direkte på elementet efter behov.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester