CSS: Zwei 50% Flüssigkeitssäulen, die min Breite nicht respektieren

Ich versuche, this Layout mit zwei 50% Spaltenbreite stattdessen zu verwenden. Aber wenn die rechte Spalte ihre "minimale Breite" erreicht, geht sie unter die linke Spalte. Gibt es eine Möglichkeit, die "Shim" -Technik zu verwenden, um eine Mindestbreite für den Wrapper festzulegen, sodass beide Größen nicht mehr skalieren. Somit wird das Problem beseitigt, dass sich die rechte Spalte in der linken Spalte befindet.CSS: Zwei 50% Flüssigkeitssäulen, die min Breite nicht respektieren

Meine Seite ist wie folgt.

<style type="text/css"> 

#left { 
    float: left; 
    width: 50%; 
} 

.minwidth { 
    width: 500px; 
    height: 0; 
    line-height: 0; 
} 

</style> 

<div id="wrapper"> 
    <div id="left"> 
     left 
    </div> 
    <div id="right"> 
     right 
    </div> 
    <div class="minwidth">&nbsp;</div> 
</div>

Das Problem mit diesem ist die linke Spalte stoppen Ändern der Größe, aber die rechte Spalte wird unterhalb der linken Spalte gehen und halten Ändern der Größe. Im Grunde ist der Effekt, den ich will, sobald die Breite der Wrapper unten geht, dass sowohl die linke als auch die rechte Spalte die Größenänderung abbricht. Das Einsetzen der Scheibe in die linke und rechte Säule funktionierte ebenfalls nicht.

Gibt es möglicherweise eine andere Möglichkeit, zwei Spalten mit 50% Breite zu erhalten und eine Unterlegscheibe zu verwenden, um eine Mindestbreite richtig einzustellen?

Vielen Dank.

Edit: Die Leerzeichen in der Klasse Minwidth ist eigentlich & nbsp aber es wurde konvertiert. ;)

Quelle

2008-10-10 Mike

es in allen Browsern passiert das? Ich habe ein Portal-Layout, das von IE gestoßen wird, weil es Minwidth ignoriert. –

Ich habe versucht, Ihre & nbsp zu ändern; aber der Parser mochte das nicht. Sieht wie ein Fehler in StackOverflow aus. – Neall

Ed.T: Nur in IE glaube ich. – Mike

konnte ich mit "keine HTML-Tabellen erforderlich" kommen Lösung basiert auf einer Technik von Stu Nicholls bei CSS Play und ich persönlich mag es, weil es nicht nur in IE6 + und FF2 + funktioniert, sondern auch in CSS, das keine Hacks benötigt. Für mein Argument, warum ein CSS-basiertes Layout gegenüber HTML-Tabellen vorzuziehen ist, siehe unten.

Zunächst empfehle ich, dass beim Erstellen neuer Seiten mit CSS mit Standards kompatibel Browser-Modus. Für eine Erklärung des quirksmode- und standardkonformen Modus, schau dir this article von einer meiner Lieblings-CSS-Ressourcen-Seiten an. Sie müssen lediglich ein bestimmtes DOCTYPE-Element oben auf Ihren Seiten hinzufügen. Das CSS wird dann gezwungen, im standardkonformen Modus zu rendern, was zu weniger Fehlern und Browser-Idiosynkrasien führt. Für den Fall, dass Sie nicht in den Standard-kompatiblen Modus wechseln können, gibt es eine Min-Width-Lösung für Browser in quirksmode, die ebenfalls bei CSS Play verfügbar ist.

Zweitens müssen Sie einen zusätzlichen Wrapper um Ihr vorhandenes Markup hinzufügen. Dieser Wrapper wird verwendet, um die Mindestbreite für Browser festzulegen, die Min-width (nicht IE) verstehen. Sie können dann den * html-Trick verwenden, um gezielt IE 6 anzusprechen und Stu Nicholls Technik auf die inneren Wrapper anzuwenden.Die Technik wird hier detailliert und das spezifische Beispiel verwendet wird, ist „# 2 für Normen konformen Modus IE“:

http://www.cssplay.co.uk/boxes/minwidth.html

Das Endergebnis ist ziemlich einfach. Sie erstellt 2 50% -Spalten unter Verwendung der in der ursprünglichen Frage erwähnten 2-column ALA style-Technik, die eine minimale Gesamtbreite (in diesem Beispiel 500px) haben, bei der die Spalten die Größenänderung nicht mehr ändern und die rechte Spalte nicht unter die linke Spalte fällt. Ich hoffe das hilft!

Bearbeiten: Dieselbe Technik kann verwendet werden, um Cross-Browser-kompatible Mindestbreite auf alles anzuwenden. Zum Beispiel müssen die Spalten nicht jeweils 50% sein und eine beliebige Anzahl von Spalten kann verwendet werden. http://www.glish.com/css/ ist eine großartige Ressource für CSS-basierte Seitenlayouts und in Kombination mit dieser minimalen Breite gibt es viele schöne Layouts, die mit minimalem, gültigem CSS erstellt werden können.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <style type="text/css"> 

     /* For browsers that understand min-width */ 
     .width { 
      width: 100%; 
      min-width: 500px; 
     } 

     /* IE6 Only */ 
     * html .minwidth { 
      border-left: 500px solid white; 
      position: relative; 
      float: left; 
     } 

     /* IE6 Only */ 
     * html .wrapper { 
      margin-left: -500px; 
      position: relative; 
      float: left; 
     } 

     .left { 
      float: left; 
      width: 50%; 
     } 

     .right { 
      float: left; 
     } 

    </style> 
</head> 
<body> 

<div class="width"> 
    <div class="minwidth"> 
     <div class="wrapper"> 
      <div class="left"> 
       Left 
      </div> 
      <div class="right"> 
       Right 
      </div> 
     </div> 
    </div> 
</div> 

</body> 
</html>

Nun, mein Anreiz für einen Stack-Überlauf Konto einrichten wurde in der Lage, unter dem „auf den Vorschlag zu reagieren Wenn Sie zwei Spalten möchten, verwenden Sie eine Tabelle, anstatt Div ist zu zwingen versucht, wie ein Tisch verhalten ". Da ich zu neu bin, um entweder zu kommentieren oder abzulehnen, erweitere ich diese Diskussion.

Wirklich?

Jemand stellt eine Frage zu CSS-basierten Layouts, und Sie antworten, indem Sie ihnen sagen, HTML-Tabellen zu verwenden?

Lassen Sie mich zunächst sagen, dass ich glaube nicht, dass HTML-Tabellen völlig unnötig sind. Wann immer ich Tabellendaten anzeigen muss, , d. H. Relationale Daten, verwende ich eine HTML-Tabelle. Die Eigenschaften der CSS-Tabellenanzeige werden noch nicht vollständig unterstützt (bald in IE8!) Und eine einstufige HTML-Tabelle ist eine effektive Lösung. Sehen Sie sich das Markup für eine der Webseiten von Google an und Sie werden sehen, dass sie einverstanden sind.

Als jemand, der viel Zeit damit verbracht hat, CSS-basierte Layouts zu schreiben, die browserübergreifend kompatibel sind, wenn sie es in 10 Minuten mithilfe einer Tabelle hätten tun können, stimme ich zu, dass es eine einfachere Lösung für dieses Problem gibt. Aber nur weil Sie Dynamit verwenden können, um Ihre Küche zu renovieren, heißt das nicht, dass Sie es sollten. Der folgende Artikel bietet eine detaillierte Erklärung dafür, warum CSS-basierte Layouts wünschenswerter sind.

http://www.chromaticsites.com/web-design-blog/2008-04-03/13-reasons-why-css-is-superior-to-tables-in-website-design/

Quelle

2008-10-23 15:21:12 adgoudz

Dies funktioniert gut, aber nur während die rechte Spalte eine kleine Menge von Daten enthält. Sobald Sie mehr als ein wenig Inhalt in haben die rechte Spalte wird umbrochen. – Mat

-4

Verwenden Sie eine 2-Spalten-Tabelle. Es wird genau das tun, was Sie wollen. Divs sollen verwendet werden, um logisch unterschiedliche Blöcke aufzuteilen, und Tabellen sind dazu da, um columned Daten auszulegen. Wenn Sie zwei Spalten haben möchten, verwenden Sie eine Tabelle, anstatt Divs zu zwingen, sich wie eine Tabelle zu verhalten.

Quelle

2008-10-10 14:16:46

Sind linke und rechte Spalten keine markanten Blöcke? Mein Zweck ist es, es als Layout zu verwenden und keine tabellarischen Daten anzuzeigen. Post zurück, wenn ich völlig falsch liege. ;) Danke. – Mike

Sie möchten ein zweispaltiges Layout, daher ist Ihr Layout tabellarisch. Es überrascht daher nicht, dass ein Tisch die beste Wahl ist, um das gewünschte Layout zu erhalten. –

Mach dir keine Sorgen David ich hole dich. Zu viel CSS-only-Layout Liebe da draußen heutzutage. –

Versuchen Sie, diese für den Stil:

.left, .right { width:50%; float: left; } 
.right { float: right; } 
.minwidth { min-width: 500px; display: block; height: 0; clear: both; }

Quelle

2008-10-10 14:20:38

Ausgezeichnet, scheint im Gegensatz zu einigen der anderen Vorschläge gut zu funktionieren. Zumindest in Firefox. Funktioniert nicht ganz mit IE. – Mat

Nur eine min Breite für den Wrapper gesetzt und nur die linken und rechten Spalten Prozentsätze ändern. Dies verhindert, dass Ihre beiden Spalten in/über/untereinander geschoben werden.

Quelle

2008-10-10 14:21:46

Dies ist eine kurze Versuch, aber es funktioniert (nur in Firefox getestet):

<head> 
<style type="text/css"> 

#left { 
    float: left; 
    width: 50%; 
} 

.minwidth { 
    min-width: 500px; 
    background:#eee; 
    height: 0; 
    overflow:visible; 
} 
.col{ 
    min-width:250px; 
    background:#eaa; 
} 

</style> 
</head> 
<body> 
<div id="wrapper" class="minwidth"> 
    <div id="left" class="col"> 
     left 
    </div> 
    <div id="right" class="col"> 
     right 
    </div> 
    <div><!-- Not needed --></div> 
</div> 
</body>

Quelle

2008-10-10 14:22:57 slashnick

In Firefox blutet eine längere rechte Spalte nach links, um die gesamte Breite zu füllen. :( – Mat

Versuchen Sie folgendes:

<html> 
<head> 
<title>Testing some CSS</title> 
<style type="text/css"> 

.floatme { 
    float: left; 
    width: 50%; 
} 

.minwidth { 
    width: 500px; 
    height: 0; 
    line-height: 0; 
    clear: both; 
} 

</style> 


<body> 
<div id="wrapper"> 
    <div class="floatme"> 
     left 
    </div> 
    <div id="floatme"> 
     right 
    </div> 
    <div class="minwidth"> </div> 
</div> 
</body> 
</html>

Quelle

2008-10-10 14:27:17 willasaywhat

In Firefox blutet eine längere rechte Spalte nach links, um die gesamte Breite zu füllen. :( – Mat

Nun, ich will nicht in ein politisches Argument zu bekommen, aber die Begründung der zitierten Artikel von Agoudzward über „warum CSS ist besser als Tabellen“ hat wenig mit Tabellen zu tun. Was es demonstriert, ist, dass CSS besser ist, als einzelne Schriftarten und Farbeinstellungen und dergleichen immer und immer wieder zu verwenden, wenn viele Seitenelemente nach demselben Stil verlangen. Ja, ich stimme absolut zu, dass wenn Sie hundert Elemente auf einer Seite haben, die alle grün sein sollten, 14pt, Arial-Text, dann ist es sehr sinnvoll, einen CSS-Stil dafür zu erstellen, anstatt ein Font-Tag immer wieder zu kopieren und einzufügen aus all den Gründen, die sie geben. Das geht doppelt, wenn Sie denselben Stil auf mehreren Seiten haben möchten.

Aber was hat das mit Tabellen zu tun?

Die Begründung scheint zu sein "CSS ist gut, weil es Ihnen erlaubt, Schriftart und Farbe einmal anstatt wiederholt zu spezifizieren, deshalb ist alles, was mit CSS getan werden kann, besser als jede mögliche Alternative". Nun, das folgt gar nicht! Nur weil ein Werkzeug für eine Art von Problem gut ist, bedeutet es nicht, dass es für alle möglichen Probleme gut ist. Hammer eignet sich hervorragend zum Einsetzen von Nägeln. Das bedeutet nicht, dass ich sie zum Schrauben benutze.Wenn ich ein Layout einfacher und logischer mit Tabellen als mit divs und CSS-Tags machen kann, dann muss ich darauf bestehen, dass ich trotzdem CSS verwenden sollte, weil "CSS ist gut" mir sagen lässt: Na und?

Quelle

2009-10-14 14:10:19 Jay

Hier ist ein gutes Beispiel für das, was Sie wünschen, denke ich.

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Kurzum hier ist die CSS:

/* Start of Column CSS */ 
#container2 { 
    clear:left; 
    float:left; 
    width:100%; 
    overflow:hidden; 
    background:#ffa7a7; /* column 2 background colour */ 
} 
#container1 { 
    float:left; 
    width:100%; 
    position:relative; 
    right:50%; 
    background:#fff689; /* column 1 background colour */ 
} 
#col1 { 
    float:left; 
    width:46%; 
    position:relative; 
    left:52%; 
    overflow:hidden; 
} 
#col2 { 
    float:left; 
    width:46%; 
    position:relative; 
    left:56%; 
    overflow:hidden; 
}

Hier ist die html:

<div id="container2"> 
    <div id="container1"> 
     <div id="col1"> 
      <!-- Column one start --> 
      <h2>Equal height columns</h2> 
      <p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p> 

      <h2>Valid XHTML strict markup</h2> 
      <p>The HTML in this layout validates as XHTML 1.0 strict.</p> 
      <!-- Column one end --> 
     </div> 
     <div id="col2"> 
      <!-- Column two start --> 
      <h3>Windows</h3> 
      <ul> 
       <li>Firefox 1.5, 2 &amp; 3</li> 
       <li>Safari</li> 
       <li>Opera 8 &amp; 9</li> 

       <li>Explorer 5.5, 6 &amp; 7</li> 
       <li>Google Chrome</li> 
       <li>Netscape 8</li> 
      </ul> 


      <!-- Column two end --> 
     </div> 
    </div> 
</div>

Quelle

2009-10-25 22:41:55

CSS: Zwei 50% Flüssigkeitssäulen, die min Breite nicht respektieren

Antwort

Verwandte Themen