Question

我需要使用css调整某个html元素<div class="content">的帮助，以便无论屏幕尺寸如何，它都将在该位置固定并响应这样（https://i.imgur.com/vYsIUXy.jpg），而不是这样（{{ 3}}）。

我将#info #head>.content的宽度从100%更改为82%，但是在较小的屏幕尺寸上，它与封面图像重叠。

HTML代码

摘要

<div id="head">
<div class="content">
<div class="uigrid">
<div class="contingo">
<p style="font-size:30px;">Meng Qi Shi Shen</p>
<div class="horizontal-list">
<a href="/anime-list" class="item">Adventure</a>
<a href="/anime-list" class="item">Comedy</a>
<a href="/anime-list" class="item">Drama</a>
<a href="/anime-list" class="item">Historical</a>
<a href="/anime-list" class="item">Romance</a>
<a href="/anime-list" class="item">Shoujo</a>
<div class="type"><span class="sub" onclick="if (!window.__cfRLUnblockHandlers) return false; changegrid()">Sub</span><span class="dub" onclick="if (!window.__cfRLUnblockHandlers) return false; changegrid()">Dub</span></div> </div>
</div>
</div>
</div>
<div class="overlay"></div>
</div>

完整的php（html）代码

https://codeshare.io/arj6eA

CSS代码

https://codeshare.io/GbyP86

Answer 1

您可以尝试使用设备的最大宽度来调整所需的宽度。例如，如果宽度为600ps

@media (max-width: 600px) {
  #info #head:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 82%;
    height: 3px;
    box-shadow: 0 2px #1b1c1d;
 }
}

或当设备的宽度为1000px时类似这样的

 @media (max-width: 1000px) {
      #info #head:after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 75%;
        height: 3px;
        box-shadow: 0 2px #1b1c1d;
     }
    }

有关更多信息，请在此处https://www.w3schools.com/css/css_templates.asp

HTML元素的CSS调整

1 个答案: