Jak zmusić elementy konkretnego diva aby były wyświetlane w linii i ewentualnie jeżeli zabraknie miejsca zeby były przewijane w POZIOMIE. samo ustawienie w linii jest dosyć proste jak sądzę przez float: left ale problem jest w tym że jeżeli ilość obrazków jest większa niż szerokość diva to są one dodawane pod sobą a tak być nie może. Jakieś praktyczne rozwiązanie poza używaniem ramek?
Pozdrawiam
0
0
display: inline ?
0
inline zawinie elementy po dojściu do 100% szerokości parenta, niezależnie od scroll. w zasadzie nie widzę żadnego sposobu, na ustawienie przez css, żeby linia nie była łamana po osiągnięciu szerokości rodzica.
tak wiec poniżej nieco kulawe (podpierające się js) rozwiązanie:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html, body {margin:0;width:100%;height:100%;}
#container {width:100%;overflow:scroll; background:#ff0;}
.item {width:220px;height:100px;background:#f00;padding:0;margin:10px;float:left;display:block;}
</style>
</head>
<body>
<script type="text/javascript">
var items = document.getElementById("subcontainer").childNodes;
var width = 0;
for (var i = 0; i < items.length; i++)
if (items[i].nodeType == 1)
width += 1 + items[i].offsetWidth + 20; // tu problem - zamiast 20 powinien być lewy i prawy margines elementu, ale nie umiem tego wyciągnąć. +1 jest dzięki IE6
document.getElementById("subcontainer").style.width = width+"px";
</script>
</body>
</html>
```
0
ok dzieki wielkie za pomoc :)