Thema: CSS Frage

Bonsai · **am:** 11. November 2015, 09:50:11

Ich steh gerade auf dem Schlauch ....

[ Für Gäste sind keine Dateianhänge sichtbar ]

Zwei DIV Elemente mit Inhalt (A und B). Zum Ausrichten in das DIV C eingebaut.

Code: XML [Auswählen]

<div class="C" style="width: 100%">
<div class="A" style="width: 63.666666666666666%; float:left;">Some content</div>
<div class="spacer" style="width: 3%"> </div>
<div class="B" style="width: 33.333333333333333%;">Some content</div>
<div style="clear:both;"></div>
</div>

Wie bekomme ich es hin, dass das DIV A immer die maximale Höhe des Elementes B einnimmt, egal ob der Inhalt in A länger oder kürzer wäre? Ich würde gerne den Überhang an Inhalt des Elementes A nach unten abschneiden.

Linkback: https://www.modified-shop.org/forum/index.php?topic=33911.0

web0null · **Antwort #1 am:** 11. November 2015, 10:39:00

Probier mal das

Code: PHP [Auswählen]

{literal}
<style>
.C{
width: 100%;
display: inline-flex;
}
.A{
width: 63.3%;
background-color: #FF0000;
float: left;
margin-right: 3.3%;
}
.B{
width: 33.3%;
background-color: #00FF00;
}
{/literal}
</style>
<div class="C">
<div class="A">Some contentA</div>
<div class="B">Some contentB<br />Some contentB<br />Some contentB</div>
</div>

Bonsai · **Antwort #2 am:** 11. November 2015, 11:06:21

Code: XML [Auswählen]

<html>
<head>
<style>
* {margin: 0px; padding: 0px;}
.C{
width: 100%;
display: inline-flex;
}
.A{
width: 66.6%;
background-color: #FF0000;
float: left;
margin-right: 3.3%;
}
.B{
width: 33.3%;
background-color: #00FF00;
}
</style>
<title>TEST</title>
</head>
<body>
<div class="C">
<div class="A">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
<br />
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div><div class="B">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>

</body>

Produziert leider kein Abschneiden des Überlaufs von A.
[ Für Gäste sind keine Dateianhänge sichtbar ]
Ich will den schraffierten Bereich loswerden, habe aber das Problem, dass ich für B keine bekannte Höhe habe.

hpzeller · **Antwort #3 am:** 11. November 2015, 12:16:35

Wenn der Style dem ersten und dem zweiten Post genügn soll, würde ich folgendes CSS vorschlagen.

Code: CSS [Auswählen]

Gruss
Hanspeter

Bonsai · **Antwort #4 am:** 11. November 2015, 12:30:35

Danke! Genau das habe ich gesucht!

Das ganze in schön und ich hab keine Probleme mehr mit der Länge der Texte in der Listenansicht:

Code: CSS [Auswählen]

[ Für Gäste sind keine Dateianhänge sichtbar ]

web0null · **Antwort #5 am:** 11. November 2015, 12:47:41

Das geht aber nur so,

Code: PHP [Auswählen]

<div class="C">
<div class="A">
Lorem ipsum<br />Lorem ipsum<br />Lorem ipsum<br />
</div>
<div class="B">
Lorem ipsum
</div>
</div>

aber nicht so,

Code: PHP [Auswählen]

<div class="C">
<div class="A">
Lorem ipsum
</div>
<div class="B">
Lorem ipsum<br />Lorem ipsum<br />Lorem ipsum<br />
</div>
</div>

reicht dir das?

Bonsai · **Antwort #6 am:** 11. November 2015, 13:22:01

Ja, schon festgestellt, dass ich noch eine min-width brauche.

hpzeller · **Antwort #7 am:** 11. November 2015, 13:26:22

Ich hoffe es genügt der Bedingung A = rot immer gleich hoch wie B = Grün, also B gibt die Höhe vor und darf nicht abgeschnitten werden aber A soll nie höher als B sein sonst soll der Text von A abgeschnitten werden, so habe ich die Aufgabe verstanden.

Es handelt sich hier nur um eine isolierte Betrachtung der Div's A, B und C im Body-Tag.

Getestet habe ich hier mit modernen Browsern.

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_display_inline

Code: CSS [Auswählen]

<!DOCTYPE html>
<html>
<head>
<style>
* {margin: 0px; padding: 0px;}
.C{
position : relative;
width: 100%;
overflow: hidden;
}
.A{
position : absolute;
width: 60%;
height: 100%;
background-color: #FF0000;
}
.B{
width: 35%;
background-color: #00FF00;
float: right;
}
</style>
<title>TEST</title>
</head>
<body>
<div class="C">
<div class="A">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
.
</div><div class="B">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</body>

Gruss
Hanspeter

Bonsai · **Antwort #8 am:** 11. November 2015, 13:40:18

Ja, richtig.

Für die Fälle bei denen mir im roten A DIV zu viel weggeschnitten wird, (Da ist auch das Produktbild drin, das soll nicht beschnitten werden) gebe ich dem grünen B DIV einfach eine min-height, die etwas größer ist als mein Produktbild (Das einzige Element mit bekannter und unveränderlicher Höhe). Ich vermute web0null meinte genau das, mit seinem Post.

Thema: CSS Frage

Bonsai

CSS Frage

web0null

Re: CSS Frage

Bonsai

Re: CSS Frage

hpzeller

Re: CSS Frage

Bonsai

Re: CSS Frage

web0null

Re: CSS Frage

Bonsai

Re: CSS Frage

hpzeller

Re: CSS Frage

Bonsai

Re: CSS Frage

Teile Thema

Ähnliche Themen

SQL Frage

SQL Frage

CSS Frage

for each Frage