时间戳

首页 > 解决方案 > HTML元素的CSS调整

php - HTML元素的CSS调整

问题描述

我需要帮助来调整带有 css 的某个 html 元素<div class="content">，以便它可以像这样（https://i.imgur.com/vYsIUXy.jpg）在该位置固定和响应，无论屏幕尺寸如何，而不像这样（https： //i.imgur.com/qUHHI0q.jpg）。

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

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

标签： phphtmlcss

解决方案

您可以尝试使用设备的最大宽度来调整您想要的。例如，如果 decive 宽度为 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

推荐阅读