Yan yana iki <div>
koymak istiyorum. Sağdaki <div>
yaklaşık 200px; ve soldaki <div>
ekran genişliğinin geri kalanını doldurmalı mı? Bunu nasıl yapabilirim?
Öğelerinizi düzenlemek için flexbox kullanabilirsiniz:
#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>
Bu temelde sadece flexbox'ın yüzeyini kazımaktır. Flexbox oldukça şaşırtıcı şeyler yapabilir.
Eski tarayıcı desteği için CSS float ve bir width özelliklerini kullanarak bu sorunu çözebilirsiniz.
#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>
Ne yazık ki, bu genel durum için çözülmesi gereken önemsiz bir şey değildir. En kolayı 200px div'inize "float: right;" css-style özelliğini eklemektir, ancak bu aynı zamanda "main"-div'inizin aslında tam genişlikte olmasına ve buradaki herhangi bir metnin 200px-div'in kenarında yüzmesine neden olur, bu da içeriğe bağlı olarak genellikle garip görünür (yüzen bir görüntü olması dışında hemen hemen her durumda).
DÜZENLE: Dom tarafından önerildiği gibi, sarma sorunu elbette bir kenar boşluğu ile çözülebilir. Ne aptalım.
Benzer bir şey yapan web sitelerimden birini yorumlamak gerekirse:
<!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>