CSS plaatsing voorbeeld (Titel, afbeelding, tekst en lees meer link)

Stel dat ik het volgende ontwerp heb om te snijden:

enter image description here

Hoe ik het kan segmenteren door GEEN absolute plaatsing van div's te gebruiken en door geen tabellay-outs te gebruiken (als ze al layouts kunnen worden genoemd :))?

0
Ja, ja! :))))
toegevoegd de auteur Narek, de bron
met float waarschijnlijk?
toegevoegd de auteur Marnix, de bron

4 antwoord

Ik denk dat het zoiets als deze jsFiddle zou zijn:

http://jsfiddle.net/cFqDX/

<html>
    <body>
        <div class="mainbody">
            

Some title

            
            
Putting a lot of text here. Putting a lot of text here. Putting a lot of text here. Putting a lot of text here.Putting a lot of text here. Putting a lot of text here. Putting a lot of text here. Putting a lot of text here. Putting a lot of text here. </div> </body> </html>

En voor de css.

.mainbody
{
    background-color:gray;
    width:800px;
    height:300px;
}

.leftimage
{
    margin:10px;
    float:left;
}

This gives me the following image: enter image description here

1
toegevoegd

Maak twee div's. De linker met de afbeelding met zwevend: links en de afbeelding met zwevend: rechts . Hierdoor hebt u twee 'kolommen' naast elkaar.

Maar eigenlijk zijn er eindeloze oplossingen voor dit ....

1
toegevoegd
Bedankt, wat als ik 3 "kolommen" heb, bijvoorbeeld img; tekstblok 1; tekstblok 2 ???
toegevoegd de auteur Narek, de bron
Wees specifieker. Hoe zou ik de centrale kolom moeten maken? Linker- en rechterkolommen zijn vrij en zweven naar rechts of links. Dus hoe zit het met centraal ??
toegevoegd de auteur Narek, de bron
OK. Dank je!!!
toegevoegd de auteur Narek, de bron
Wederom een ​​div voor elk tekstblok en gebruik de float-optie.
toegevoegd de auteur Jules, de bron
De centrale kolom hoeft niet te zweven. Controleer deze JSfiddle die ik heb gemaakt om mijn punt te verduidelijken: jsfiddle.net/MUpmD
toegevoegd de auteur Jules, de bron

Je kunt zweven: links of een div maken rond de tekst, die je geeft: inline-block .

1
toegevoegd
De tweede versie met display: inline-block werkt niet :(
toegevoegd de auteur Narek, de bron
Oh, de tweede versie werkt als ik zwevend verliet de afbeelding! Bedankt!
toegevoegd de auteur Narek, de bron
Het zou moeten als de afbeelding op zijn is. Als de afbeelding zich in een blok zelf bevindt, moet dat blok ook weergeven: inline of inline-blok hebben. Maar als het niet voor jou werkt, is er altijd de float. :)
toegevoegd de auteur GolezTrol, de bron

Ik heb hier een jsfiddle gemaakt waarvan ik verwacht dat deze redelijk goed werkt in browsers en redelijk gemakkelijk te onderhouden is.

1
toegevoegd
Bedankt maar waarom gebruik je overflow: auto; voor klasse .product?
toegevoegd de auteur Narek, de bron
Verwijderd! Niks gebeurt :))! Ik heb ook op de knop UPDATE gedrukt!
toegevoegd de auteur Narek, de bron
Verwijder het en kijk wat er gebeurt:)
toegevoegd de auteur Steve Adams, de bron
Raar, het zou ervoor moeten zorgen dat het beeld in het eerste blok de .product div overlapt, vanwege de .product div negeren de drijvende elementen. Ik gebruik dit als een soort 'clearfix' in plaats van een semantisch nutteloos element in de container te plaatsen. EDIT: Wow, je hebt gelijk. Ik ben hier mezelf voorgegaan, haha. Het lijkt erop dat het niet nodig is.
toegevoegd de auteur Steve Adams, de bron