html间距问题 - 保留左边距作为变量右边距0

-1

在分辨率520-719px之前，我将内容固定为500px并保留边距：0 auto.So对于700像素的屏幕，内容为500像素，剩余边距，每个100px。对于600像素的屏幕，内容为500像素，左侧为空白，右侧为50。现在，我想让margin-left是相同的（screenWidth-500）/ 2，margin的右边是0.中心内容的宽度不再是固定的，它将是（500+右边距的任何区域）我怎么能实现这一点。这是可能的使用CSS。?? 我试图使用jquery，因为当窗口大小从520到719像素，我做计算作为margin-left =（screenWidth-500）/ 2和margin-right：0 请建议一个更好的解决方案。html间距问题 - 保留左边距作为变量右边距0

来源

2017-09-13 Harpreet Chawla

哇，这是真的可怕的阅读。请学习[如何提出一个好问题]（https://stackoverflow.com/help/how-to-ask）。 – Utkanos

您可以使用CSS calc，像这样：

（我用的包装来模拟一个600px的窗口宽度 - 红色边框）

.your_div { 
 
    width: calc(500px + ((100% - 500px)/2)); 
 
    margin-left: calc((100% - 500px)/2); 
 
    margin-right: 0; 
 
    background: green; 
 
    height: 300px; 
 
} 
 

 
.wrapper { 
 
    width: 600px; 
 
    border: 1px dotted red; 
 
}

<div class="wrapper"> 
 
    <div class="your_div"></div> 
 
</div>

来源

2017-09-13 18:33:14 Johannes

这适用于我，谢谢。 –

html间距问题 - 保留左边距作为变量右边距0

回答

相关问题