将边距或填充应用于绝对元素

I have a absolute wrapper and absolute div, they have to be responsive, so I set them 100% width. How to set margin to the left and right?

我有一个绝对包装和绝对div,他们必须有响应,所以我将它们设置为100%宽度。如何设置左右边距?

.card{
    border:1px solid black;
    height:120px;
    width:100%;
    position:absolute;
    bottom: 0;
    -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#wrap{
    overflow:hidden;
    position:absolute;
    bottom:0;
    left: 0;
    width: 100%;
    height: 120px !important;
}

#card1{
    background:black;
    top:0;
    color:white;
}

http://jsfiddle.net/rrapj20o/6/

2 个解决方案

#1

Reduce your width by twice the margin you need on either side

将宽度减少两倍所需的边距

width:95%;
margin: 0 2.5%;

Fiddle - http://jsfiddle.net/yqcgtjLd/

小提琴 - http://jsfiddle.net/yqcgtjLd/

#2

You can make it simple like the below. Before that you have to know where we have to mention position:absolute.

你可以像下面这样简单。在此之前你必须知道我们必须提到的位置:绝对。

Fiddle : http://jsfiddle.net/rrapj20o/7/

小提琴:http://jsfiddle.net/rrapj20o/7/

#1