在另一个带有一些填充的div里面的div [英] div inside another div with some padding

问题描述

我打算将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>

推荐答案

只需在#outdiv_inner中添加以下css

Just add below css in #outdiv_inner

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;
}

您需要删除该职位。只有当你试图移动内容而不考虑它的容器时才应该使用它。



最大的变化是外部div上的填充。然后你只需要内部div来填充宽度：100％和高度：100％



试试这个。

You need to remove the position. That should only be used if you are trying to move content without respect to its container.

The big change was the padding on the outer div. Then you just need the inner div to fill it with width: 100% and height:100%

Try this.

<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>

即使你已经有了解决方案，我也会建议另一个。



你已经说过你问题中的关键工作：填充。因此，使用属性padding（padding-top，padding-left等等......），而不仅仅是margin。它专为此类案件而设计。要了解，请了解盒型号：

http： //www.w3.org/TR/CSS2/box.html [ ^ ]。

-SA

Even though you already got the solution, I'll suggest another one.

You already said the key work in your question: "padding". So, use the property "padding" ("padding-top", "padding-left" and so on...), not only "margin". It is designed specially for such cases. For understanding, please learn the box model:
http://www.w3.org/TR/CSS2/box.html[^].

—SA

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