Question

* {
  box-sizing: border-box;
}
h1 {
  text-align: center;
  margin-bottom: 20px;
}
div {
  width: 100%;
}
p {
  width: 90%;
  height: 200%;
  margin: 20px;
  color: black;
  padding: 10px;
}
@media (min-width: 992px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    float: left;
    position: relative;
    border: 1px solid black;
    margin: auto;
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 74.99%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}
#heading {
  position: absolute;
  left: 358px;
  top: 0;
  background-color: #A52A2A;
  width: 20.2%;
  height: 12.2%;
  text-align: center;
  border: 1px solid black;
}
</style>

<h1>Our Menu</h1>

<div class="row">
  <div class="col-lg-4">
    <section id="heading">Heading</section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
  </div>
  <div class="col-lg-4">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
  </div>
  <div class="col-lg-4">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
  </div>

</div>

我正在尝试创建响应式webpapge：

我有3个div，我需要他们每个人在右上角有一个标题。我想要做的是当我将浏览器的宽度从992px增加到全屏时，div的大小和位置应该随着标题的变化而相应改变。

我还需要div之间的差距，我已经使用了相对和绝对定位，但这似乎不起作用。

使用我的代码时，标题在我更改浏览器宽度时不会调整大小，而且还会超出div （参见图片）。请帮忙！

P.s我在第一个div上添加了标题用于检查目的。

Answer 1

好的，这里有一些关于你的标题的要点：

这是一个标题，因此请使用<h1, h2, h3...>标记。
如果它有绝对位置，并且你说从左边开始是358px，它将从左边准确定位358px，这就是为什么离开div。要将标题放在右侧，我会使用float: right代替当然，添加浮动到标题，你必须添加浮动到下面的文本。
如果您使用的宽度为20％，则不会占总数（如果您希望标题符合整个父级的宽度，则必须使用100％。
使用@media (min-width: 992px)的媒体查询来进行更大分辨率的更改。

建议的解决方案 在媒体内部查询中，您只需要覆盖要更改的元素（在您的情况下，只是宽度）。我们想要的改变是当屏幕大于992px时，标题的宽度为100％所以：这是一般的CSS规则：

#heading {
          background-color: #A52A2A;
          border: 1px solid black;
          float: right;
          height: 12.2%;
          position: relative;
          text-align: center;
          width: 20%;
        }

这里我们有一个特定的规则......

@media (min-width: 992px) {
  #heading {
    width: 100%;
  }
}

想象一下，你想要更改background-color，你所要做的就是在媒体查询中的规则中添加属性....

Answer 2

你必须将父div位置设置为相对position:relative，因为具有绝对位置的元素总是允许具有相对位置的第一个父

see your example here

Answer 3

您不需要使用位置作为标题。你可以使用浮动。还有一件事让你把ID带到课堂上。 Coz ID仅用于唯一标识符。所以上课。检查你用于间隙的媒体查询的css部分.col-lg-4 {width：32.33％;保证金：5px的; } 只是你的问题的即时答案。谢谢，任何问题都在评论中问我

＆＃13;

* {
  box-sizing: border-box;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}



p {
  width: 90%;

  margin: 20px;
  color: black;
  padding: 10px;
}

@media (min-width: 992px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    float: left;
    
    border: 1px solid black;
   
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 32.33%;
    margin:5px;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 74.99%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

.heading {
  float:right;
  background-color: #A52A2A;
   width: 20.2%;
  height: 12.2%;
  text-align: center;
  border: 1px solid black;
}

＆＃13;

   <h1>Our Menu</h1>

<div class="row">
  <div class="col-lg-4">
    <section class="heading">Heading</section> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
  </div>
  <div class="col-lg-4">
   <section class="heading">Heading</section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
  </div>
  <div class="col-lg-4">
    <section class="heading">Heading</section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
  </div>

</div>

＆＃13;

具有绝对/相对定位的响应式网页

3 个答案: