Zwei schwebende Säulen – eine feste, eine lose Breite

Question 1

Ich habe mich umgesehen SOaber ich kann keine finden, die meinem Vorkommen entspricht, ich habe im Grunde zwei Spalten, eine feste Breite (185px) und die andere Spalte hat keine feste Breite, aber ich brauche die letzte Spalte, um den letzten Platz zu füllen, z

...........................................
.---------  ------------------------------.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  ------------------------------.
.+       +                                .
.+       +                                .
.+       +                                .
.---------                                .
...........................................

Die erste Spalte sollte immer zu 100 % unten sein, wenn die zweite Spalte die restliche Breite ausfüllt, sie sind beide gefloatet left, wenn ich die Größe des Browserfensters verändere, wird die zweite Spalte unter der ersten Spalte angezeigt. Ich brauche die zweite Spalte, um die verbleibende Breite auszufüllen und flexibel zu sein, wenn ich die Größe des Browserfensters verändere.

Question 2

Es gibt tatsächlich einen einfacheren Weg, dies zu tun, als Floats zu verwenden:

.container {
    position: relative;
}

.left {
    width: 185px;
    position: absolute;
    top: 0;
    left: 0;
}

.right {
    margin-left: 185px;
}

Question 3

Durch die Verwendung negativer Margen aus diesem Tutorial das CSS kann wie folgt aussehen

html, body, .container {
    height:100%;
    padding:0;
    margin:0;
}
.container {
    min-width: 300px;
}
.left {
    float:left;
    width: 185px;
    margin-right: -185px;
    height:100%;
}
.right {
    margin-left:185px;
}

http://jsfiddle.net/Y5FAT/1/

http://jsfiddle.net/Y5FAT/

Question 4

Die Lösung wurde bearbeitet, diesmal mit Flexbox, und die linke Spalte mit fixiert flex: 185px 0 0; Dann wurde die rechte Spalte automatisch vergrößert flex-grow:1

*{
  box-sizing: border-box;
}

body{
  padding:0;
  margin:0;
}

#container{
  display:flex;
}

#left{
  height: 100vh;
  flex: 185px 0 0;
  background-color:tomato;
}

#right{
  flex-grow: 1;
}

#right > div{
  background:pink;
}

  <body>
    <div id="container">
      <div id="left"> Left </div>
      <div id="right">
        <div>
        Right <br/>
        dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf  dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf 
        </div>
      </div>
    </div>
  </body>

Question 5

Schau mal rein Dies. Es gibt keine Demos, aber ich habe schon einmal Tutorials von diesem Typen verwendet, also gehe ich davon aus, dass es gut funktioniert. Ich entnehme dem Artikel, dass der Hauptinhalt flüssig ist. Der Seiteninhalt kann auch flüssig sein, aber ich denke, Sie können ihm einfach eine feste Breite geben und es dabei belassen. Der Trick dabei ist, den Hauptinhalt zuerst zu platzieren.

Question 6

Die “Position: absolut;” Die Antwort ist ziemlich gut, hat aber browserübergreifende Auswirkungen, insbesondere wenn Sie für IE entwickeln. Der beste Weg, dies zu erreichen, ist der folgende:

<html>
<head>
<style>
    div.right {
        float: right;
        width: 200px;
    }
    div.left {
        margin-right: 200px;
    }
    div.clear {
        clear: both;
    }
</style>
</head>
<body>
    <div class="right"><!--your code here--></div>
    <div class="left"><!--your code here--></div>
    <div class="clear"></div>
</body>
</html>

Bitte beachten Sie, dass das gewünschte div auf der rechten Seite zuerst im HTML aufgerufen wird. Beachten Sie auch das Löschen des Schwimmers nach den Spalten, was praktisch ist, wenn Sie unten Inhalte haben oder wenn es einen übergeordneten Container gibt.

Question 7

Wenn Sie weder Floats noch absolute Positionierung verwenden möchten, war das Einfachste, was ich mir einfallen lassen konnte

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        white-space: nowrap;
      }
      div.left {
        display: inline-block;
        width: 200px;
        white-space: normal;
        background-color: red;
        vertical-align: top;
      }
      div.right {
        display: inline-block;
        white-space: normal;
        background-color: green;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div class="left">
      left
    </div>
    <div class="right">
      right
    </div>
  </body>
</html>

Question 8

Nun, die genehmigte Antwort ist gut, aber für diejenigen, die nach mehr suchen, ist hier ein Link. Ich hoffe, Sie finden das nützlich. 😉

http://www.dynamicdrive.com/style/layouts/category/C13/