ボックスの横幅などを定数で記述できない時は、calc 関数を使用して計算式で記述します。
固定幅と可変幅を混在:ウィンドウサイズの変化を確認するために別ウィンドウで表示してください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(calc-1)</title>
<style>
body {
margin: 0;
}
.container {
border: #ccc 1px solid;
}
.box {
padding: 0px;
margin: 0px;
overflow: hidden;
}
.image {
width: 256px;
height: 256px;
float: left;
}
img {
width: 100%;
}
.text {
width: calc(100% - 512px);
height: 256px;
background: #ccc;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="image"><img src="images/tips-256x256-red.jpg" alt="赤"></div>
<div class="text"><br>テキスト領域<br>両端に256pxのイメージ領域で残りがテキスト領域</div>
<div class="image"><img src="images/tips-256x256-blue.jpg" alt="青"></div>
</div>
</div>
</body>
</html>
複数ボックスを並べる:ウィンドウサイズの変化を確認するために別ウィンドウで表示してください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(calc-2)</title>
<style>
body {
margin: 0;
}
.container {
border: #ccc 1px solid;
}
.box {
padding: 0px;
margin: 0px;
overflow: hidden;
}
.image {
width: 256px;
height: 256px;
float: left;
}
img {
width: 100%;
}
.text {
width: calc((100% - 256px) / 3);
height: 256px;
text-align: center;
float: left;
}
.green {
background: green;
}
.red {
background: red;
}
.yellow {
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="image"><img src="images/tips-256x256-red.jpg" alt="赤"></div>
<div class="text green"><br>テキスト領域1<br>左端に256pxのイメージ領域で残りを1/3のテキスト領域</div>
<div class="text red"><br>テキスト領域2<br>左端に256pxのイメージ領域で残りを1/3のテキスト領域</div>
<div class="text yellow"><br>テキスト領域3<br>左端に256pxのイメージ領域で残りを1/3のテキスト領域</div>
</div>
</div>
</body>
</html>