Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Hjälp med placera div-tags [HTML+CSS]

1
Skriv svar
Permalänk
Medlem
●

Hjälp med placera div-tags [HTML+CSS]

Hej hej!

Jobbar på en hemsida där jag vill att alla artiklar jag postar visas i rutor som är, tja, vänster sorterade. Ritade en liten bild där den mörkröda, nästan bruna bakgrunden, kan ses som "main" eller "container" eller nåt för huvudinnehållet, och där varje gul ruta är en separat nyhet.

Sådär ska det alltså se ut, där alla artiklar kommer i "första lediga ruta"... Eftersom inläggen kommer variera i höjd, som ruta 1, 2 & 3 belyser, så blir det lite knepigare än om alla varit lika långa.

Såhär ser mitt resultat ut just nu:

Som ni ser, blir det fjärde inlägget under första inlägget (vilket är rätt), men börjar inte förens efter tredje slutar, när den egentligen skall börja direkt under 1:an! Jag vet inte riktigt varför, och det är ju helt klart min logik som felar.

I koden, det enda som jag gör är att använda "float: left" på alla inlägg, dvs alla gula rutor, och då får jag det resultatet som visas på andra bilden. Byter jag till "float: right" får jag en spegelbild av detta beteende. Det krävs alltså något jag inte känner till för att få inlägg 4:a att ignorera höjden på inlägget nummer 3, och börja direkt där inlägg 1 slutar.

Alla tips/förslag/hjlälp uppskattas mycket!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du får använda dig utav masonry eller isotope.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Vet inte om detta ens är möjligt i CSS utan något sorts javascript hack. ruta 3 "flyter" hela vägen till vänstersidan under ruta 1, och det är därför ruta 4 inte får plats. (om jag inte är helt ute och cyklar nu.)

Marwelln har nog pekat dig åt rätt riktning. Jag vet ingen annan lösning till detta problem iaf.

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack för hjälpen marwelln.

Ska kika på länkarna och försöka med en av dom imorgon.

CSS-lösning uppskattas fortfarande om sådana finns!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Headman:

Tack för hjälpen marwelln.

Ska kika på länkarna och försöka med en av dom imorgon.

CSS-lösning uppskattas fortfarande om sådana finns!

Gå till inlägget 
<!doctype html>
<html>
<head>
<style>
<!--
body{
margin:0px;
}
.box{
	position:relative;
	width:calc( 50% - 40px );
	border:4px solid grey;
	margin:5px;
	padding:10px;
	display:inline-block;
}
.left{
	float:left;
}
.right{
	float:right;
	right:4px;
}
-->
</style>
</head>
<body>
	<div style="height:500px;" class="box left"></div>
	<div style="height:200px;" class="box left"></div>
	<div style="height:700px;" class="box right"></div>
	<div style="height:300px;" class="box right"></div>
</body>
</html>
Visa signatur

Nuvarande dator:Amd 8core 3.5ghz, GTX 780, 8gb ram
Gammal dator (nuvarande server):Amd 4core 4ghz (o 3.7ghz), GTX 580, 16gb ram
Jag har hållit på med html,php,css,js i 2 år nu, samt fl studio i 2 år.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Siktar du inte på så fet browser support så går att det att lösa relativt simpelt med enbart CSS, tack vare Flexbox.

Du kan även köra den här tekniken med enbart CSS: http://sickdesigner.com/masonry-css-getting-awesome-with-css3...
Så kan du köra Masonry som polyfill för äldre webbläsare.

Visa signatur

| i7 920 | UD5 | 6GB | 3TB | Intel SSD 80GB | Antec P182 |
http://webbutveckla.nu - Blogg om webbutveckling

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ursäktar mitt sena svar, men jag har inte kunnat jobba med hemsidan alls på sistone, nu kan jag ta upp detta igen, och hade helt glömt att man kunde använda inline-block. Ska kika på Masonry grejen också. Kommer att lösa sig.

Tack borrarensson respektive J_ajje

Redigera
Citera flera Citera
1
Skriv svar