Я хочу поставити два <div>а поруч один з одним. Правий
приблизно 200px; а лівий
Ви можете використовувати 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>
Це, по суті, просто шкрябання поверхні флексбокса. Flexbox може робити досить дивовижні речі.
Для підтримки старих браузерів, ви можете використовувати CSS float і властивості width, щоб вирішити цю проблему.
#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>
На жаль, це не є тривіальною річчю, яку можна вирішити для загального випадку. Найпростіше було б додати властивість css-стилю "float: right;" до вашого 200px div, однак це також призведе до того, що ваш "main"-div буде фактично на всю ширину, і будь-який текст у ньому буде плавати по краю 200px-div, що часто виглядає дивно, залежно від вмісту (практично у всіх випадках, крім випадків, коли це плаваюче зображення).
РЕДАГУВАТИ: Як запропонував Dom, проблему з обгорткою, звичайно, можна було б вирішити з запасом. Дурний я.
Перефразовуючи один з моїх сайтів, який робить щось подібне:
<!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>