wie man eine floating div verschwinden für kleinere Bildschirme?

Dies ist eine Reine html/css-Frage, hier geht es..
Ich habe eine floating div rechts von meiner Seite layout, ich brauche es, um zu verschwinden, wenn mein Bildschirm zu klein ist (oder wenn die Größe des browser-Fenster auf eine kleinere Einstellung). Sagen wir mal es ist etwas so einfaches wie das hier:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Layout test</title>
    <link href="simple.css" rel="stylesheet" type="text/css" media="screen" />
  </head>
  <body>
    <h1>Welcome</h1>
    <div id="right-div">
      <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
      </ul>
    </div>
    <div id="main">
      <p>Some content goes here!</p>
    </div>
  </body>    
</html>

sagen wir, es hat diese einfache CSS zu:

#main {
  border:       1px solid black;
  width:        800px;
  height:       500px;
  padding:      7px;
  margin-left:  auto;
  margin-right: auto;
  position:     relative;
  z-index:      10;
}

#right-div {
  border:   1px solid black;
  float:    right;
  width:    200px;
  position: relative;
  z-index:  9;
}

Als jetzt, wenn ich die Fenster Größe, die div mit id der rechts-div beginnt, überschneiden sich mit den "wichtigsten" div. Ich muss wissen, wie man Sie verschwinden oder verstecken wenn der Bildschirm klein ist (oder kleiner).

Wie kann ich dies erreichen?
Ich danke Ihnen allen im Voraus für Eure Hilfe,

J.

Stellen Sie sicher, zu akzeptieren, eine richtige Antwort, denn es profitieren sowohl die Nutzer und dem rest der Gemeinschaft.

InformationsquelleAutor jlstr | 2011-08-12

  1. 2

    Hier ist eine Lösung, wenn man eine Feste Breite layout. http://jsfiddle.net/uMVMG/

    <div id="container">
    <div class="inner">

        <div id="right-div">
            <ul>
                <li>Option 1</li>
                <li>Option 2</li>
                <li>Option 3</li>
            </ul>
        </div>

        <div id="main">
            <p>Some content goes here!</p>
        </div>

    </div><!-- .inner end -->      
</div><!-- #container end -->

#container {
  overflow: hidden;
  max-width: 500px;
  min-width: 300px;
}

#container .inner {
  width: 500px;
}

#right-div {
  float: right;
  width: 200px;
  background: green;
}

#main {
  width: 300px;
  height: 200px;
  background: red;
}
    Dieser funktioniert. obwohl ich habe festgestellt, dass anstelle des floating-blocks, für diesen Zweck ist es besser, verwenden Sie die rechten und linken Eigenschaften und position: fixed. Für jetzt, deine Lösung ist besser, da habe ich keine Ahnung, was media queries sind.

    InformationsquelleAutor Webars

  2. 23

    Verwenden Media Queries. Beispiel:

    @media all and (max-width: 300px) {
    .floated_div { display: none; }
}

    jsFiddle-Beispiel. Die Größe der Ausgabe-Bereich, bis er kleiner als 300px um den Effekt zu sehen.

    Sehen diese Antwort für IE-Kompatibilitätsmodus.

    +1 - das, was ich wollte vorschlagen.
    Interessant. haben, zu schauen, was media queries sind. Vielen Dank dennoch. schöne Lektion.

    InformationsquelleAutor Madara Uchiha

Schreibe einen Kommentar