Question

我正在尝试创建一个容器，在大屏幕尺寸中包含页面中心940像素的内容，但是在较小的屏幕尺寸上只有一个小的边距，因此内容不会撞击在屏幕的两侧。页。

我曾尝试使用calc（）函数来实现这一点，并且不确定为什么它会破坏边距（一切都变为左对齐）。

＆＃13;

.container {
	max-width: 940px;	
	margin: 0 auto;
	@media screen and (max-width: 940px) {margin: 0 calc(auto + 20px);}
}

＆＃13;

Answer 1

D'哦，在这里寻找填充，不需要使用calc（）函数：

def price(prices, default_price, dates, curr_date)
  (dates+[curr_date+1]).zip(prices+[default_price]).
    find { |d,_| curr_date < d }.last
end

Answer 2

试试这个。如果情况并非如此，请告诉我。这应该适合你。

＆＃13;

private byte[] hex2bin( string hexvalue )
{
    byte [] result = new byte[hexvalue.Length / 2];;

    for (int pos = 0; pos < hexvalue.Length; po+=2)
       byte[pos/2] =  Convert.Byte( hexvalue.SubString(pos, 2),  16 );

   return result;
}

＆＃13;

Answer 3

检查此演示，了解您的确切要求，大屏幕的宽度为940px，对齐中心。此外，它在其他响应模式下也能完美运行。

<!DOCTYPE html>
<html>
<head>
<title>Layout CSS</title>
</head>

<style type="text/css">
body{
      margin:0;
      padding: 0;
}
.container{
      position: relative;
      display: table; /*** Used for container align center ***/
      width: 90%;
      max-width: 940px;
      margin: 2.5% auto 5% auto;
      border:1px solid black;
}
.demo_height { 
      height: 500px; /*** Demo height for box ***/
} 
</style>

<body>
<div class="container">
<div class="demo_height"></div>
</div>
</body>
</html>

此外，它在其他响应模式下也能完美运作。

Answer 4

更改此

<body>
<style>
.container { max-width: 940px margin: 0 auto;}
@media screen and (max-width: 940px) {
 .container {max-width:none;margin:0 20px;}
}
</style>
<div class="container" style="height:500px;background:yellow"></div>
</body>

Answer 5

您不必添加保证金，只需减去宽度：

@media screen and (max-width: 940px) 
  {
    margin: 0 auto;
    width: calc(100% - 40px);
  }

带有保证金的响应式容器标签

5 个答案: