Искам да поставя два символа <div>
един до друг. Десният <div>
е около 200px, а левият <div>
трябва да запълни останалата част от ширината на екрана? Как мога да направя това?
Можете да използвате 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. 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, което често изглежда странно в зависимост от съдържанието (почти във всички случаи, освен ако е плаващо изображение).
EDIT: Както предложи 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>