CSS block uitlijnen in tekst
Ik wil een CSS block rechts uitlijnen in een stuk tekst, net zoals je met een afbeelding kunt doen.
Met "display: inline" begint de tekst onderaan op dezelfde regel als waar het block in staat, maar het is dus de bedoeling dat de tekst gewoon bovenaan begint, en als het block op het gegeven moment stopt, dat de tekst daaronder dan weer de hele breedte van het vak benut, net als bij het plaatsen van een afbeelding in de tekst.
Weet iemand of dit kan, en zo ja, hoe?
Alvast bedankt.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
echo '<html>
<head>
<style>
#my_container{border: 1px solid #000;}
#my_right_floating_text {width: 100px; height: 100px; float: right; background-color: #aaaaaa; margin: 0 0 5px 5px; padding: 5px;}
#my_normal_text{text-align: justify;}
</style>
</head>
<body>
<div id="my_container">
<div id="my_right_floating_text">Hello World!</div>
<div id="my_normal_text">'.
lorem_ipsum() .'<br/><br/>'. lorem_ipsum() .'<br/><br/>'. lorem_ipsum() .'<br/><br/>'
.'</div>
</div>
</body>
</html>';
function lorem_ipsum() {
return 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum';
}
?>
echo '<html>
<head>
<style>
#my_container{border: 1px solid #000;}
#my_right_floating_text {width: 100px; height: 100px; float: right; background-color: #aaaaaa; margin: 0 0 5px 5px; padding: 5px;}
#my_normal_text{text-align: justify;}
</style>
</head>
<body>
<div id="my_container">
<div id="my_right_floating_text">Hello World!</div>
<div id="my_normal_text">'.
lorem_ipsum() .'<br/><br/>'. lorem_ipsum() .'<br/><br/>'. lorem_ipsum() .'<br/><br/>'
.'</div>
</div>
</body>
</html>';
function lorem_ipsum() {
return 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum';
}
?>
<style>
#my_container{border: 1px solid #000;}
#my_right_floating_text {width: 100px; height: 100px; float: right; background-color: #aaaaaa; margin: 0 0 5px 5px; padding: 5px;}
#my_normal_text{text-align: right;}
</style>
??