Edgar Ehritt: Zwei float right, einer mit, einer ohne clear right

Beitrag lesen

SELF-Forum

Zwei float right, einer mit, einer ohne clear right

Edgar Ehritt
– Informationen zu den Bewertungsregeln

Hallo Prog,

Gibt es eine Möglichkeit dieses Verhalten zu erzeugen?

es ist nicht mit CSS alleine Möglich, prinzipiell ist jedoch nie etwas wirklich unmöglich ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<style type="text/css">
~~~~~~css
  
#menu   {float:right;background:red}  
.fi     {width:100px; height:30px;border:solid 1px green;display:inline-block}  
#bilder {text-align:right;float:right}  
#anhang {display:none;float:right;clear:right}

</style>  
<script type="text/javascript">
~~~~~~javascript
  
	function dl(){  
		var anhang =document.getElementById('anhang');  
		var bilder =document.getElementById('bilder');  
		var imglist=bilder.getElementsByTagName('img');  
		var brlist =bilder.getElementsByTagName('br');  
		var n,m;  
		var p      =imglist.item(i).offsetLeft;  
		for(var i=0;i<imglist.length;i++){  
			n=imglist.item(i);  
			if(p!=n.offsetLeft){  
				while(i!=imglist.length){  
					n=imglist.item(i);  
					m=brlist.item(i);  
					anhang.appendChild(n.cloneNode(true));  
					bilder.removeChild(n);  
					bilder.removeChild(m);  
					anhang.appendChild(document.createElement('br'));  
				}  
				break;  
			}  
		}  
		if(anhang.hasChildNodes()){  
			anhang.style.display='block';  
		}  
	}

</script>  
</head>  
<body onload="dl()">  
<div id="bilder">  
	<ul id="menu">  
		<li>link 1</li>  
		<li>link 2</li>  
		<li>link 3</li>  
		<li>link 4</li>  
		<li>link 5</li>  
	</ul>  
	<img src="test" class="fi" alt="1"/><br/>  
	<img src="test" class="fi" alt="2"/><br/>  
	<img src="test" class="fi" alt="3"/><br/>  
	<img src="test" class="fi" alt="4"/><br/>  
	<img src="test" class="fi" alt="5"/><br/>  
	<img src="test" class="fi" alt="6"/><br/>  
	<img src="test" class="fi" alt="7"/><br/>  
	<img src="test" class="fi" alt="8"/><br/>  
	<img src="test" class="fi" alt="9"/><br/>  
	<img src="test" class="fi" alt="10"/><br/>  
	<img src="test" class="fi" alt="11"/><br/>  
	<img src="test" class="fi" alt="12"/><br/>  
</div>  
<div id="anhang"></div>  
<p>text text ...</p>  
</body>  
</html>

Sollten jedoch die Bilder nicht gleichgroß sein, wird es nicht funktionieren. Ggf. zurückmelden.

Gruß aus Berlin!
eddi

Beitrag melden
–
Informationen zu den Bewertungsregeln