2

这个社区的新手，找不到以前是否有人问过这个问题

我正在使用其内容设置为 1200 像素的主题。问题是我想创建一个全宽到屏幕边缘的 DIV，然后偏移左边距以抵消差异。（我猜这是最简单的方法）

我的问题是如何计算屏幕一侧到 1200px 网格左侧之间的列宽？然后将该差异计算为我正在尝试创建的 DIV 的宽度，以便 DIV 是全宽的，无论它正在查看什么屏幕尺寸？

我知道我可以使用 Visual Composer 之类的精美编辑器来做到这一点，但是它们太笨重并且会使网站变慢..

以下似乎适用于文本，但我无法让图像在屏幕全宽范围内拉伸，除非我将其放大并与屏幕尺寸重叠。我需要它从屏幕一侧触摸到屏幕一侧

`.blue_section {
  width: 200% !important;
  margin: 0px -50% 0px -50% !important;
  padding: 0px 0px 0px 0px !important;
  background-color: #0088CC;
}
.blue_content {
  width: 1200px !important;
  height: 100% !important;
 margin: 0px auto 0px auto !important;
 padding: 10px !important;
}`

再次抱歉，如果以前有人问过这样的问题。

4

5 回答 5

4

如果要将 div 设置为屏幕的整个宽度，则只需使用以下代码：

div {
  /* I added this just for fun */
  background-color: skyblue;
  color: white;
  font-family: Century Gothic;
  padding: 5px;
  text-align: center;

  /* The code that you need to copy */
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>Hello World!</div>
  </body>
</html>

于 2021-02-11T13:57:27.677 回答
2

这是来自 w3 的示例。
https://www.w3schools.com/cssref/func_calc.asp

#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}
<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>
<div id="div1">Some text...</div>

于 2017-06-14T17:05:43.670 回答
1

您可以做的是将您div的position: absolutediv 设置为独立于布局的其余部分。然后说width: 100%让它填满屏幕宽度。现在只需使用margin-left: 30px（或您需要的任何 px）就可以了。

关于计算列的宽度：如果这不是问题，可以使用 Javascript 轻松解决。

var col = document.findElementById("id-of-your-column-div");
var screenFill = document.findViewById("screen-filler");

screenFill.style.marginLeft = col.clientWidth;
于 2017-06-14T17:01:53.377 回答
1

你的意思是这样的吗？

<div style="width:1200px;right:0px; top:100px; height:200px;background-color:lightgray;">Hello</div>
于 2017-06-14T17:03:02.193 回答
0

你可以做：

  <style>
  .mydiv{
  width:1150px;
  margin: auto 0;
  }
 </style>

宽度：1150px 使用 25px 左右两边的边距

于 2017-06-14T17:13:16.160 回答