Kann man mit HTML einen Text nur auf die Hälfte der Seite machen?
Ich möchte einen Text im Blocksatz nur auf der Hälfte der Seite haben, sodass der Text mit dem Ende einer Tabelle abschließt. Ist da was möglich? Wie nennt man sowas, ich scheine nicht die richtigen Begriffe für Google zu verwenden?
Skizze hinzugefügt.
3 Antworten
Beispiel:
<div class="container">
<table>
<tr>
<td>Test</td>
</tr>
</table>
<p>
Lorem ipsum dolor sit amet
</p>
</div>
CSS:
table {
border: 1px solid; /* for demonstration */
width: 100%;
}
.container {
width: 50%;
}
Der Container legt die Breite fest, die Tabelle und Paragraph jeweils insgesamt einnehmen dürfen.
Wenn du nur die Breite des Paragraph definierst und die Tabelle sich durch Inhaltsänderungen noch einmal ändert, musst du den Style für den Paragraph erneut anpassen.
2.Frage: Ich habe es auch mal so gemacht, wie du hier geschrieben hast. Kann man da noch was neben diese div machen, sodass in einer separaten Box neben der Tabelle was steht.
Die Frage wäre erst einmal, ob neben der kompletten Box eine zweite Spalte stehen soll oder nur neben der Tabelle.
Den ersten Fall könnte man leicht mit einer Flexbox lösen.
<div class="two-column-container">
<div class="container"><!-- table, paragraph --></div>
<div><!-- right column ... --></div>
</div>
CSS:
.two-column-container {
column-gap: 10px;
display: flex;
}
Im zweiten Fall könnte man entweder die Tabelle und die rechte Box in eine Box stecken und wie oben mit einer Flexbox ausrichten oder man nutzt ein Grid.
<div class="container">
<table><!-- ... --></table>
<div><!-- right column ... --></div>
<p><!-- text ... --></p>
</div>
CSS:
.container {
column-gap: 10px;
display: grid;
grid-template:
"a b"
"c c";
width: 50%;
}
Die Tabelle braucht nicht mehr explizit auf 100% Breite gestreckt werden. Das übernimmt nun das Grid.
Ich weiß nicht, was du genau mit der Tabelle meinst, aber pack den Text einfach in ein DIV mit der gewünschten Position und Größe rein.
Eine Skizze wäre hilfreich.
Also ich habe eine Tabelle mit Länge x. Dann folgt ein Text mit der Länge X+Y. Ich will aber, dass der Text auch Länge X hat und dann in die nächste Zeile geht. Wie als würde man in Word eine Textbox machen, die unter ein Bild gesetzt wird und nicht über das Bild hinaus geht. Ich habe eine Skizze hinzugefügt.
Ein DIV mit der gewünschten Breite. Dieses DIV enthält die Tabelle und den Text, beides mit 100% Breite.
Funktioniert nicht. Du meinst, aber schon einfach:
<div><table>....</table><p>....</p></div>
OdeR?
Die Lösung von regex9 ist wie immer super. Wollte aber noch kurz eine weitere Lösung aufzeigen, weil diese einen semantischen Bezug des Textes zur Tabelle herstellt (sozusagen Erklärung des Tabelleninahltes), indem man tfoot benutzt:
https://jsfiddle.net/0kjr9tdy/
Maximale Erfolge!
Ich habe es jetzt so gemacht, dass ich einfach den Paragraf definiert habe:
<p style="width:50%">
funktioniert tatsächlich, kann man das so machen, oder wäre das nicht ästhetisch.