在另一个带有一些填充的div里面的div

问题描述

我打算将div放在另一个带填充的div中。但我面临一些问题，顶级位置仍然相同。我该如何解决这个问题

I am planning to place a div inside another div with padding . but i face some problem top position remains same. how can i solve this issue

<style type="text/css">
#outdiv
{
    margin: 20px auto 20px auto;
    width: 1100px;
    height: 630px;
    max-height: 100%;
    background: #1C4675;
    font-size: 14px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    position:relative;
}

#outdiv_inner
{
    margin: 10px 5px 10px 5px;
    width: 1090px;
    height: 620px;

    background: #E8E8E8;
    font-size: 14px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

</style>



<div id="outdiv">
    <div id="outdiv_inner"></div>
</div>

推荐答案

position: absolute;

并将#outdiv_inner的宽度更改为610px;



修改后的CSS将会像

and change the width of #outdiv_inner to 610px;

Modified CSS Will be like

#outdiv_inner
{
    margin: 10px 5px 10px 5px;
    width: 1090px;
    height: 610px;
    background: #E8E8E8;
    font-size: 14px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
	position: absolute;
}

<style type="text/css">
    #outdiv
    {
        margin: 20px auto 20px auto;
        padding: 15px;
        width: 1100px;
        height: 630px;
        background: #1C4675;
        font-size: 14px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    #outdiv_inner
    {
        width: 100%;
        height: 100%;
        background: #E8E8E8;
        font-size: 14px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }
</style>

<div id="outdiv">
    <div id="outdiv_inner"></div>
</div>

这篇关于在另一个带有一些填充的div里面的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！