Question

我在这里有一个jsfiddle https://jsfiddle.net/ajvvjnq3/

非常简单，我有一个固定宽度的div，位置固定且居中。

低于600px我希望div为100％宽度，左右边距为20px。

我无法获得margin-right: 20px;

.block{
    background: red;
    height: 100px;
    position: fixed;
    top: 50px;
    left: 50%;
    margin-left: -200px;
    width: 400px;
}

@media only screen and (max-width: 600px){
    .block{
        left: 0;
        margin-left: 20px;
        margin-right: -20px;
        width: 100%;
    }
}

<div class="block"></div>

Answer 1

JSfiddle https://jsfiddle.net/ajvvjnq3/2/

您可以尝试使用calc

width: calc(100% - 40px);似乎工作正常

这里所做的只是否定你边缘的价值。

修改替代方案是使用@CBroe答案，因为它支持的浏览器数量超过calc，但无论您的船是什么漂浮：）

@media only screen and (max-width: 600px){ .block{ left: 20px; right: 20px; width: auto; margin: auto; } }

Answer 2

我只是用这个：

@media only screen and (max-width: 600px){
    .block{
        left: 20px;
        right: 20px;
        width: auto;
        margin: auto;
    }
}

从20px和left定位元素right，并将width设置为auto将使其在尊重“差距”的同时获得正确的宽度你希望它在任何一方都有。并且margin: auto（0也可以正常工作）只需撤消您之前用于居中元素的边距。

https://jsfiddle.net/ajvvjnq3/4/

Answer 3

试试这个，它会起作用..

@media only screen and (max-width: 600px){
    .block{
    left: 0 !important;
    margin: 0 !important;
    position: relative !important;
    right: 0 !important;
    width: 100% !important;
    }
}

Answer 4

尝试使用<?php $string = 'ROUND(({NOPAY_COUNT} * ({TOTAL_BASIC_SALARY}/24)),2)'; $string = preg_replace('/}/', '', $string); $string = preg_replace('/{/', '$', $string); echo $string; //ROUND(($NOPAY_COUNT * ($TOTAL_BASIC_SALARY/24)),2)添加width:100%;

替换width:initial;

right:0;

<强> Demo Here

Answer 5

calc（）可以轻松定位具有设定边距的对象。在这个例子中，CSS创建了一个横跨窗口延伸的横幅，横幅两边和窗口边缘之间有20像素的间隙

<强>的jsfiddle

http://jsfiddle.net/DhwaniSanghvi/okvoLuu5/

<div class="block"></div>



.block{
    background: red;
    height: 100px;
    position: fixed;
    top: 50px;
    left: 50%;
    margin-left: -200px;
    width: 400px;
}

@media only screen and (max-width: 600px){
    .block{
        position: fixed;
        top: 50px;
        margin-left: 20px;
        margin-right:20px; 
        left:0;
        width: calc(100% - 40px);
    }
}

CSS - 响应中心div，位置固定

5 个答案: