Div внутри div
Здравствуйте. Никак не пойму как мне сделать div с чертой внизу другого div. Есть такой код
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="dialog">
<div>
<p>
<font style='color: #2878af; font-size: 21px; font-family: Segoe_light;'> шоссе 144а</font><br> <font style='font-size: 13px; font-family: Segoe_Semibold;'>заказов 2</font>
</p>
</div>
<div id='orders'>
<div class='line-1'></div>
<p class='porders' id='porders1'>
<table class='listorder'>
<tr>
<td>Заказ № 150</td>
<td style='text-align:right;'>14:04</td></tr>
<tr>
<td>ул.Маршала Жукова дом12, кв 23<br/>статус кухни<br/>5</td>
<td style='text-align:right;' valign='top'>14:04</td>
</tr>
</table>
</p>
<div class='line-1'></div>
<p class='porders' id='porders0'>
<table class='listorder'>
<tr>
<td>Заказ № 178</td>
<td style='text-align:right;'>19:06</td>
</tr>
<tr>
<td>ул.Маршала Жукова дом12, кв 23<br/>статус кухни<br/>undefined</td>
<td style='text-align:right;' valign='top'>19:06</td>
</tr>
</table>
</p>
</div>
<div id='component'>
<div class='line-1'></div>
<p >
<input type='button' id='CloseBtn' class='MapButton' value='Закрыть' />
</p>
</div>
</div>
</body>
</html>
и css Код:
#dialog { |
valyan, вариант...
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style type="text/css">
#dialog {
border: 1px solid silver;
/*margin: 15px;*/
padding-left: 20px;
padding-right: 20px;
/*border-radius: 10px;/* закругленные углы*/
width: 20%;
position: absolute;
z-index: 999;
height: 85%;
background: rgba(240, 240, 240, 0.9);
/*bottom: 100px; /* Положение от нижнего края */
top: 30px; /* положение от ыерхнего края */
right: 25px; /* Положение от правого края */
/*overflow: auto;*/
font-size: 11px;
}
#dialog p
{
margin: 0; /* Убираем отступы вокруг */
padding-top: 5px;
padding-bottom: 7px;
}
.line-1
{
border-top: 1px solid #c8c8c8;
border-bottom: 1px solid #fff;
height: 1px;
width: 100%;
}
.porders
{
cursor: pointer;
}
.MapButton
{
color: #333333;
background: yellow;
border: 1px dotted #83B8C7;
margin-top: 20px;
}
.listorder
{
font-size: 11px;
width: 100%;
}
#component
{ width: 90%;
position: absolute;
padding-right: 5px;
bottom: 0px;
right: 10px;
text-align: right;
}
</style>
<title>JS Bin</title>
</head>
<body>
<div id="dialog">
<div>
<p>
<font style='color: #2878af; font-size: 21px; font-family: Segoe_light;'> шоссе 144а</font><br> <font style='font-size: 13px; font-family: Segoe_Semibold;'>заказов 2</font>
</p>
</div>
<div id='orders'>
<div class='line-1'></div>
<p class='porders' id='porders1'>
<table class='listorder'>
<tr>
<td>Заказ № 150</td>
<td style='text-align:right;'>14:04</td></tr>
<tr>
<td>ул.Маршала Жукова дом12, кв 23<br/>статус кухни<br/>5</td>
<td style='text-align:right;' valign='top'>14:04</td>
</tr>
</table>
</p>
<div class='line-1'></div>
<p class='porders' id='porders0'>
<table class='listorder'>
<tr>
<td>Заказ № 178</td>
<td style='text-align:right;'>19:06</td>
</tr>
<tr>
<td>ул.Маршала Жукова дом12, кв 23<br/>статус кухни<br/>undefined</td>
<td style='text-align:right;' valign='top'>19:06</td>
</tr>
</table>
</p>
</div>
<div id='component'>
<div class='line-1'></div>
<p >
<input type='button' id='CloseBtn' class='MapButton' value='Закрыть' />
</p>
</div>
</div>
</body>
</html>
|
рони, спасибо. Но почему последняя линия не подчиняется padding-left: 20px и padding-right: 20px?
Сделал пока так #component
{ width: 83%;
position: absolute;
padding-right: 10px;
padding-left: 10px;
bottom: 0px;
right: 10px;
text-align: right;
}
Интересно, почему не подчиняется div`у dialog.. |
потому что ты используешь id а не class
используй !important там где есть противоречия |
| Часовой пояс GMT +3, время: 13:44. |