Здравствуйте.
Возникла задача написать мелкий форум, попутно решил попробовать освоить верстку div'ами. Неуспешно :) Как я хочу увидеть это в html:
<div class='message'>
<div class='message-user-info'>
Posts: 49230
</div>
<div class='message-container'>
<div class='message-title'>
title
</div>
<!-- <hr/> -->
<div class='message-body'>
content
</div>
</div>
<div class='message-info'>
message-info
</div>
</div>
Как я попытался это описать в css
.message {
padding: 10px 10px 10px 10px;
/*min-width: 90%;
min-height: 100px;
*/
width: 100%;
height: 100%;
background: pink;
border-radius: 10px;
}
.message-user-info {
padding: 10px 10px 10px 10px;
min-height: 100px;
min-width: 100px;
background: lightgreen;
border-radius: 10px;
float: left;
}
.message-container {
padding: 10px 10px 10px 10px;
min-height: 100px;
min-width: 300px;
width: 100%;
background: black;
border-radius: 10px;
float: left;
}
.message-title {
padding: 10px 10px 10px 10px;
min-height: 100px;
background: cyan;
border-radius: 10px;
}
.message-body {
padding: 10px 10px 10px 10px;
min-height: 100px;
background: white;
border-radius: 10px;
}
.message-info {
padding: 10px 10px 10px 10px;
min-height: 100px;
background: brown;
border-radius: 10px;
float: left;
}
Дело в том, что я что-то совершенно не понимаю как сделать инкапсуляцию, к примеру как в layout'ах того же Qt.