Ich möchte zwei <div>
s nebeneinander setzen. Das rechte <div>
ist etwa 200px; und das linke <div>
muss den Rest der Bildschirmbreite ausfüllen? Wie kann ich das machen?
Sie können flexbox verwenden, um Ihre Elemente anzuordnen:
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
/* Just so it's visible */
}
#wide {
flex: 1;
/* Grow to rest of container */
background: lightgreen;
/* Just so it's visible */
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
Dies ist im Grunde nur ein Kratzen an der Oberfläche von Flexbox. Flexbox kann ziemlich erstaunliche Dinge tun.
Für ältere Browser-Unterstützung, können Sie CSS float und eine width Eigenschaften verwenden, um es zu lösen.
#narrow {
float: right;
width: 200px;
background: lightblue;
}
#wide {
float: left;
width: calc(100% - 200px);
background: lightgreen;
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
Leider ist dies nicht eine triviale Sache für den allgemeinen Fall zu lösen. Die einfachste Sache wäre, eine css-style-Eigenschaft "float: rechts;" zu Ihrem 200px div hinzufügen, jedoch würde dies auch dazu führen, dass Ihr "main"-div tatsächlich volle Breite und jeder Text in es würde um den Rand des 200px-div schweben, die oft seltsam aussieht, je nach Inhalt (so ziemlich in allen Fällen, außer wenn es ein schwebendes Bild).
EDIT: Wie von Dom vorgeschlagen, könnte das Umbruchproblem natürlich mit einem Rand gelöst werden. Ich Dummerchen.
Um es mit den Worten einer meiner Websites zu sagen, die etwas Ähnliches tut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style TYPE="text/css"><!--
.section {
_float: right;
margin-right: 210px;
_margin-right: 10px;
_width: expression( (document.body.clientWidth - 250) + "px");
}
.navbar {
margin: 10px 0;
float: right;
width: 200px;
padding: 9pt 0;
}
--></style>
</head>
<body>
<div class="navbar">
This will take up the right hand side
</div>
<div class="section">
This will fill go to the left of the "navbar" div
</div>
</body>
</html>