Es muss nicht bleiben, wo ich es will, schau mal:CSS Schwimmern verkorkste

<div style="float: left; width: 30%"> 
<img src="{avatar}" alt="" /> 
</div> 

<div style="float:right; width: 70%; text-align: left"> 
{message} 
</div> 

<div style="clear:both"></div>

Internet Explorer:
http://i32.tinypic.com/34sfiu9.png

Mozilla Firefox:
http://i28.tinypic.com/2vm9cab.png

Ich möchte, dass der Text in der Spitze (versuchte vertikale Ausrichtung: oben), und Ich möchte, dass das Bild in der weißen Box in IE ist.

Hoffe jemand besser qualifizierten kann mir helfen.

Danke! kann nicht das Problem herauszufinden:/

Edit: Hinzugefügt ganzen Code

* { padding: 0; margin: 0; } 

body { 
font: 11px Geneva, "Trebuchet MS", Arial, Verdana, sans-serif; 
width: 999px; 
background: #EFEFEF; 
} 

#content { 
width: 400px; 
} 

.thread-content { 
padding: 5px; 
border: 1px solid #CECFCE; 
background: #FFF; 
} 

div.header { 
border: 1px solid #CECFCE; 
background: #FFF; 
margin-bottom: 10px; 
} 


<div id="content"> 

<div class="header">{title}</div> 
<div class="thread-content"> 

<div style="float: left; width: 30%; padding: 5px"> 
<img src="{avatar}" alt="user avatar" /> 
</div> 

<div style="float: right; width: 70%; text-align: left"> 
{message} 
</div> 

<div style="clear:both"></div> 
</div> 

</div>

Quelle

2009-07-11 Digerdoden

Können Sie die HTML/CSS-Datei auch für das übergeordnete Containerelement einschließen? –

@chris: done deal – Digerdoden

sicher sein, der Marge sowohl auf 0 gesetzt:

<img src="{avatar}" alt="" style="float: left; width: 30%; margin: 0px"/> 

<div style="float:right; width: 70%; text-align: left; margin: 0px"> 
{message} 
</div> 

<div style="clear:both"></div>

Wie CSS kann sehr knifflig sein, einige andere Lösungen zu versuchen:

Lass beide nach links schweben, sollte keinen Unterschied machen.

Stellen Sie sicher, dass der Rahmen die Größe nicht vergrößert.

Verringern Sie die Breite von einem ein bisschen, IE ist stur.

Quelle

2009-07-11 14:42:00 Dykam

immer noch das gleiche, aber danke für den Versuch zu helfen – Digerdoden

Bearbeitet etwas. Entfernen Sie immer unnötigen Overhead. – Dykam

Dies passiert, weil die Summe der (externen) Breiten der beiden Floating Divs größer als die interne Breite der externen Box ist, so dass sie nicht in die gleiche Zeile passen.

Versuchen Sie, die Breite des externen div zu erhöhen, indem Sie die Polsterung verringern, die Breite oder den Randabstand der internen Boxen verringern.

Quelle

2009-07-11 14:42:55

70% + 30% = 100% ... bedeutet eine genaue Passform. Bringt mich zum Grübeln. – Dykam

Nicht in der CSS-Welt. Das ist die "Schönheit" des CSS-Box-Modells. –

Ja, wahr ... Padding und Rahmen können Layouts mit Leichtigkeit zerstören. – Dykam

Code funktioniert gut, wenn ich es versuchte. Sind Sie sicher, dass auf dem Bild oder dem Text kein Padding oder Rand vorhanden ist? Das würde die von Ihnen verwendeten Prozentsätze durcheinander bringen. Wenn Sie es haben, untersuchen Sie das Bild und den Text in Firebug, um zu sehen, welche Stile angewendet werden.

Quelle

2009-07-11 14:56:59 Jared

Wenn Sie width: 30% oder width: 70% angeben, impliziert dies die Breite des Inhalts innerhalb der div-Datei ohne die Füllung, den Rand und den Rand des div. Mit Blick auf die Bilder bin ich mir sicher, dass Sie beiden Divs einige Padding usw. hinzugefügt haben. Ich sehe auch keinen 'Hintergrund: #fff' in deinem Code, also bin ich mir nicht sicher, welches die 'weiße' Box ist.

Quelle

2009-07-11 15:03:40

Ok, habe ich abgelehnt, weil ich einen Tisch benutzt habe? Ich bin nicht von Beruf ein Designer, ich bin eigentlich ein Programmierer, und ich weiß, dass es Hardcore-CSS-Designer gibt, die bei der Idee, ein Tabellenlayout zu verwenden, zusammenzucken scheinen, aber es scheint für mich zu funktionieren. Die Grafikdesigner, mit denen ich zusammenarbeite, geben automatisch generierte Tabellenlayouts von Feuerwerkskörpern, mit denen man wirklich arbeiten muss.

Sowieso die Art, wie ich persönlich versuchen würde, den erforderlichen Effekt zu erzielen, obwohl reines css eher wie wäre.

<html> 
<head> 
    <title>SandBox</title> 
    <style type="text/css"> 
     #outerDiv 
     { 
      margin:0; 
      background-image:url(myImage.gif); 
      background-position:top left; 
      background-repeat:no-repeat; 
      padding-left:30%; 
      min-height:200px; 
      background-color:#777777;    
     } 
     #innerDiv 
     { 
      background-color:#333333; 
     } 
    </style>  
</head> 
<body> 
    <div id="container" style="width:500px;"> 
     <div id="outerDiv"> 
      <div id="innerDiv">content goes here</div> 
     </div> 
    </div> 
</body>

Hinweis: Ich bin kein Designer. Ich habe das auch zu einem Wiki gemacht. Also bitte editieren oder zumindest einen Kommentar hinterlassen, wenn du abstimmen willst.

Quelle

2009-07-12 16:42:17

CSS Schwimmern verkorkste

Edit: Hinzugefügt ganzen Code

Antwort

Verwandte Themen