Hintergrund und CSS Floats

StackOverflow https://stackoverflow.com/questions/1495952

  •  19-09-2019
  •  | 
  •  

Frage

Also ich bin mit dem 960 Grid-System und fand ein paar Dinge, die sie nicht unterstützen. Ich habe in Betracht gezogen Blaupause wechseln, aber ich habe wieder auf das Design ein wenig später im Prozess zu kommen, bekommt. Wie auch immer, ich habe meinen Code vereinfacht zu zeigen, was ich erlebe: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
    .frame { width: 960px; margin-left: auto; margin-right: auto; }
    .column { display: inline; float: left; position: relative; margin: 10px 10px 10px 10px; width: 300px; background-color: silver; }
    #bkg { background-color: blue; }
</style>
</head>

<body>
    <div class="frame" id="bkg">
        <div class="column">Column A</div>
        <div class="column">Column B<div><br/><br/><br/><br/></div></div>
        <div class="column">Column C</div>
    </div>
</body>

</html>

Ich versuche, den Hintergrund zu sehen, erweitern alle drei Spalten zu decken. Gibt es etwas, was ich tun kann um den Hintergrund zu erweitern, so dass es alle drei Spalten abdeckt?

War es hilfreich?

Lösung

können Sie haben den Rahmen Schwimmer nach: 

.frame { width: 960px; margin-left: auto; margin-right: auto;float:left}

und das tut es. Oder Sie können mit einem „clear fix“ ein zusätzliches Element in dem Rahmen setzen. Der vorgefertigte 960 Raster tut dies für Sie mit einer Klasse „klar“: 

(css  .clearfix { clear: both } )
<div class="frame"
   ...
<div class="clearfix" /></div>

Andere Tipps

Fügen Sie einfach diese zusätzliche Regel Ihre Wähler: 

div.frame {
     overflow:hidden;
}

Sie sollten müssen nicht auf dem clearfix verlassen, wenn Sie Elemente außerhalb des Rahmens kommen, noch sollten Sie auf jeden Fremd Markup mit klaren verlassen müssen. Beide

Sie müssen die clearfix Klasse gelten #bkg. 

<div class="frame clearfix" id="bkg">

Was möchten Sie tun ist „um den Schwimmer löschen.“ Es gibt viele Möglichkeiten gibt, einige leicht, und einige recht komplex.

Am einfachsten ist eine Lichtung div nach der letzten Spalte hinzuzufügen, wie folgt aus: 

<div class="frame" id="bkg">
  <div class="column">Column A</div>
  <div class="column">Column B<div><br/><br/><br/><br/></div></div>
  <div class="column">Column C</div>
  <div style="clear: both;"></div>
</div>

Und das sollte Arbeit.

Hier sind einige andere Möglichkeiten (einige reine CSS):

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top