При некоторых условиях margin-top работает некорректно
см в примере текст в нижнем квадрате
<html>
<head>
<style>
div.mainView
{
flow:grid;
width:*;
height:*;
border-spacing:4px;
margin:10px;
}
div.leftPlayer
{
top:1#;
left:1#;
width:234px;
height:*;
//border:1px solid #fff;
}
div.tableView
{
top:1#;
left:2#;
width:*;
height:*;
flow:horizontal;
padding:2px;
}
div.rightPlayer
{
top:1#;
left:3#;
width:234px;
height:*;
}
div.myPlayer
{
top:2#;
left:1#;
right:3#;
width:*;
height:210px;
flow:horizontal;
}
div.userPanelL
{
width:100px;
height:100px;
color:white;
background-color:black;
}
div.userPanelR
{
width:100px;
height:100px;
margin-left:*;
color:white;
background-color:black;
}
div.userPanelB
{
width:100px;
height:100px;
margin-right:25px;
margin-left:120px;
margin-top:50px;
color:white;
//display:none;
background-color:black;
}
p.uName
{
margin-top:15px;
margin-left:70px;
}
p.uState
{
margin-left:70px;
}
</style>
</head>
<body>
<div class = mainView>
<div class = leftPlayer >
<div class = userPanelL>
<p class=uName id = idU1Name />
<p class=uState id = idU1State />
</div>
<div class = cardsViewL />
</div>
<div class = tableView >
</div>
<div class = rightPlayer >
<div class = userPanelR>
<p class=uName id = idU2Name />
<p class=uState id = idU2State />
</div>
<div class = cardsViewR />
</div>
<div class = myPlayer >
<div class = userPanelB>
<p class=uName id = idU3Name />
<p class=uState id = idU3State />
</div>
<div class = cardsView>
</div>
</div>
</div>
<script type="text/tiscript">
self.$(#idU1Name).html="test";
self.$(#idU2Name).html="test";
self.$(#idU3Name).html="test";
</script>
</body>
</html>
Здравствуйте, kuzbas22, Вы писали:
K>При некоторых условиях margin-top работает некорректно
При каких условиях?
Добавь там себе правило
div.mainView div { outline:1px dotted green; }
и скажи какие именно проблемы ты видишь?
Здравствуйте, kuzbas22, Вы писали:
Если я правильно догадался то добавь
или это
div.userPanelB
{
...
clear:both;
}
или это:
div.userPanelB
{
flow:vertical;
}
Про margin collapsing можно почитать здесь
http://www.howtocreate.co.uk/tutorials/css/margincollapsing (беллетристика)
или спек:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Здравствуйте, c-smile, Вы писали:
CS>Здравствуйте, kuzbas22, Вы писали:
K>>При некоторых условиях margin-top работает некорректно
CS>При каких условиях?
CS>Добавь там себе правило
CS>CS>div.mainView div { outline:1px dotted green; }
CS>
CS>и скажи какие именно проблемы ты видишь?
Попробовал, появился зеленый бордер вокруг мэйнвью, я не знаю про outline но ведет он себя как бордер.
Здравствуйте, c-smile, Вы писали:
CS>Здравствуйте, kuzbas22, Вы писали:
CS>Если я правильно догадался то добавь
CS>или это
CS>CS>div.userPanelB
CS>{
CS> ...
CS> clear:both;
CS>}
CS>
CS>или это:
CS>CS>div.userPanelB
CS>{
CS> flow:vertical;
CS>}
CS>
CS>Про margin collapsing можно почитать здесь http://www.howtocreate.co.uk/tutorials/css/margincollapsing (беллетристика)
CS>или спек: http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Угу, оба варианта подходят.
Спасибо!