Es gribu novietot divus <div>
s blakus viens otram. Labais <div>
ir apmēram 200px, bet kreisajam <div>
ir jāaizpilda pārējais ekrāna platums? Kā es varu to izdarīt?
Elementu izvietošanai varat izmantot flexbox:
#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>
Tas būtībā ir tikai flexbox virsmas skrāpēšana. Flexbox var darīt diezgan pārsteidzošas lietas.
Vecāku pārlūkprogrammu atbalsta gadījumā varat izmantot CSS float un width īpašības, lai to atrisinātu.
#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>
Diemžēl to nav triviāli atrisināt vispārējā gadījumā. Visvienkāršāk būtu pievienot 200px divam css stila īpašību "float: right;", tomēr tas izraisītu arī to, ka jūsu "main" divs faktiski būtu pilnā platumā un jebkurš tajā esošais teksts peldētu ap 200px divs malu, kas bieži vien izskatās dīvaini atkarībā no satura (gandrīz visos gadījumos, izņemot, ja tas ir peldošs attēls).
EDIT: Kā ierosināja Doms, ietīšanas problēmu, protams, varētu atrisināt ar malu. Es muļķis.
Pārfrāzējot vienu no manām tīmekļa vietnēm, kas darbojas līdzīgi:
<!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>