CSS 部分重叠且图像未居中

Posted

技术标签:

【中文标题】CSS 部分重叠且图像未居中【英文标题】：CSS sections overlaping and images not centering 【发布时间】：2021-06-14 10:29:06 【问题描述】：

我正在尝试制作一个简单的网页，但在使用 CSS 时遇到了一些问题。 我的第一个问题是 headerImg 没有以浏览器的全宽显示，并且右侧的边距很小，我似乎无法找到原因。

我的第二个问题是#work .section 中的图像，它们与#contactMe 部分重叠，无法找到一种方法将它们集中在页面中心的 2 列中的所有 4 个图像。无论我更改什么，它们都会一直拉到页面的左侧。

最后，我找不到一种方法让标签响应浏览器中的变化，以便即使浏览器改变大小，它们也都出现在标题中。

谢谢你UUUUUU我是CSS的超级新手，绝对讨厌它哈哈

@font-face  font-family: Cherolina; src: url('./Fonts/coolvetica.ttf');  
@font-face  font-family: Roboto; src: url('./Fonts/Roboto-Thin.ttf');  
@font-face  font-family: RobotoR; src: url('./Fonts/Roboto-Regular.ttf');  

:root
    --white: #ffffff;
    --dark: #90323d;


* 
    box-sizing: border-box;
    padding: 0;
    margin: 0;


body 
    background-color: #f8edeb;


header 
    padding: 2%;
    font-family: Cherolina;
    background-color: var(--dark);
    color: var(--white);


header h1 
    display: inline-block;
    font-size: 70px;
    margin-left: 20px;
    margin-bottom: 10px;


header section 
    padding-top: 40px;
    float: right;
    font-family: Roboto;
    font-size: 20px;


header section ul 
    list-style-type: none;


header section ul li 
    display: inline-block;
    margin-left: 25px;


.headerImg
    margin: 0;
    width: 100%;
    height: 150px;
    overflow: hidden;
    opacity: 70%;




header section a 
    color: var(--white);
    text-decoration: none;


p 
    font-size: 20px;


.float-left 
    float: left;
    margin-right: 25px;


.float-right 
    float: right;
    margin-left: 25px;


.sections
    margin: 50px 50px 50px 50px;
    width: 90%;
    height: 500px;
    display: inline-block;


.sections p
    font-family: roboto;
    margin-top: 50px;
    text-align: justify;
    margin-left: 110px;
    width: 40%;
    display:inline-block;


.content h2
    font-family: cherolina;
    color: var(--dark);
    font-size: 60px;
    margin: 0 100px 0 100px;
    border-bottom: 2px solid var(--white);


.content
    display: flex;
    flex-direction: column;
    justify-content: center;


.content img
    width: 550px;
    height: 360px;
    background-size: cover;
    margin: 50px 0 50px 0;


.content ul 
    list-style-type: none;
    background-color: rgba(255,255,255,.70);
    height: 30%;
    margin-top: 90px;


.content li 
    display: inline;
    font-family: roboto;
    margin: 70px 50px 50px 50px;
    float: right;


.content a 
    text-decoration: none;
    color: black;
    border-bottom: .5px solid black;
    font-size: 20px;


#work a
    border-bottom: 0px;


#firstWeb
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    float: none;
    opacity: 100%;
    flex-wrap: nowrap;


.workImg
    display: inline-block;
    column-count: 2;
    margin-bottom: 0;
    margin-top: 0;
    opacity: 100%;
 

.workImg:hover
    opacity: 70%;


#firstWeb:hover
    opacity: 70%;


footer 
    padding: 30px;
    clear: both;
    text-align: center;
    font-family: Cherolina;
    background-color: var(--dark);


footer h2 
    font-size: 20px;
    color: var(--white);

<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./Assets/style.css">
    <title>Portfolio</title>
</head>

<body>
    <header>
        <h1>MR</span></h1>
        <section>
            <ul>
                <li>
                    <a href="#aboutMe">About me</a>
                </li>
                <li>
                    <a href="#work">Work</a>
                </li>
                <li>
                    <a href="#contactMe">Contact me</a>
                </li>
            </ul>
        </section>
    </header>

    <section class="headerImg">
        <img src="./assets/Images/header.png">
    </section>

    <section class="content">

        <section id="aboutMe" class="sections">
            <h2 class="float-right">About Me</h2>
            <img src="./assets/Images/aboutMe.jpg" class="float-left" />
            <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam, laudantium nihil explicabo maxime molestias nam earum commodi eligendi at eaque perferendis dolorem temporibus alias repudiandae est assumenda, illum quas! Ipsam!
            </p>
        </section>

        <section id="work" class="sections">
            <h2 class="float-left">Work</h2>
            <a href="https://github.com"><img id="firstWeb" src="./Assets/Images/firstWeb.webp" /></a>
            <a href="https://github.com"><img class="workImg" src="./Assets/Images/work.png" /></a>
            <a href="https://github.com"><img class="workImg" src="./Assets/Images/work.png" /></a>
            <a href="https://github.com"><img class="workImg" src="./Assets/Images/work.png" /></a>
            <a href="https://github.com"><img class="workImg" src="./Assets/Images/work.png" /></a>

        </section>

        <section id="contactMe" class="sections">
            <h2 class="float-right">Contact Me</h2>
            <ul>
                <li>
                    <a href="https://github.com">Github</a>
                </li>
                <li>
                    <a href="https://LinkedIn.com">LinkedIn</a>
                </li>
                <li>
                    <a>@gmail.com</a>
                </li>
                <li>
                    <a>55XXXX</a>
                </li>
            </ul>
        </section>

    </section>
    
    <footer>
        <h2>Made with ❤️️</h2>
    </footer>
</body>

</html>

【问题讨论】：

移除'高度：150px;'来自 .headerImg 和 'height: 500px;'来自.sections。 【参考方案1】：

你能检查下面的代码吗？希望它对你有用。

    第一个问题的解决方案是，您需要将width:100% 和height:100%; 分配给图像（.headerImg img），以便图像覆盖浏览器的整个宽度。 您已修复height:500px 给所有产生问题并与另一部分内容重叠的部分。可以设置min-height:500px，可以解决重叠问题。 在您的“工作”部分，您希望在页面中心的 2 列中显示所有 4 个图像，只需将 4 个图像包装在一个 div 中并使用 flex 实用程序类，您可以对齐图像并将其保持在中心的网页。 注意：要将图像居中并并排对齐，请参考“flex”属性，它将帮助您根据需要对齐内容。 当浏览器大小发生变化时，您可以使用媒体查询来响应内容。

请参考此链接：https://jsfiddle.net/yudizsolutions/Lmvahgwz/

@font-face  font-family: Cherolina; src: url('./Fonts/coolvetica.ttf');  
@font-face  font-family: Roboto; src: url('./Fonts/Roboto-Thin.ttf');  
@font-face  font-family: RobotoR; src: url('./Fonts/Roboto-Regular.ttf');  

:root
    --white: #ffffff;
    --dark: #90323d;


* 
    box-sizing: border-box;
    padding: 0;
    margin: 0;


body 
    background-color: #f8edeb;


header 
    padding: 2%;
    font-family: Cherolina;
    background-color: var(--dark);
    color: var(--white);


header h1 
    display: inline-block;
    font-size: 70px;
    margin-left: 20px;
    margin-bottom: 10px;


header section 
    padding-top: 40px;
    float: right;
    font-family: Roboto;
    font-size: 20px;


header section ul 
    list-style-type: none;


header section ul li 
    display: inline-block;
    margin-left: 25px;


.headerImg
    margin: 0;
    width: 100%;
    height: 150px;
    overflow: hidden;
    opacity: 70%;




header section a 
    color: var(--white);
    text-decoration: none;


.headerImg img  width:100%; height:100%; object-fit:cover;

p 
    font-size: 20px;


.float-left 
    float: left;
    margin-right: 25px;


.float-right 
    float: right;
    margin-left: 25px;


.sections
    margin: 50px auto;
    width: 90%;
    min-height: 500px;
    display: inline-block;


.sections p
    font-family: roboto;
    margin-top: 50px;
    text-align: justify;
    margin-left: 110px;
    width: 40%;
    display:inline-block;


.content h2
    font-family: cherolina;
    color: var(--dark);
    font-size: 60px;
    margin: 0 100px 0 100px;
    border-bottom: 2px solid var(--white);


.content
    display: flex;
    flex-direction: column;
    justify-content: center;


.content img
    width: 100%;
    height: 360px;
    background-size: cover;
    margin: 50px 0 50px 0;


.content ul 
    list-style-type: none;
    background-color: rgba(255,255,255,.70);
    height: 30%;
    margin-top: 90px;
        overflow: hidden;


.content li 
    display: inline;
    font-family: roboto;
    margin: 70px 50px 50px 50px;
    float: right;


.content a 
    text-decoration: none;
    color: black;
    border-bottom: .5px solid black;
    font-size: 20px;


#work a
    border-bottom: 0px;


#firstWeb
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    float: none;
    opacity: 100%;
    flex-wrap: nowrap;


.work-content  display:flex; align-items:center; justify-content:center; flex-wrap: wrap;
.work-content a  margin:0px 15px; width: calc(50% - 30px);

.workImg
    display: inline-block;
    column-count: 2;
    margin-bottom: 0;
    margin-top: 0;
    opacity: 100%;
 

.workImg:hover
    opacity: 70%;


#firstWeb:hover
    opacity: 70%;


footer 
    padding: 30px;
    clear: both;
    text-align: center;
    font-family: Cherolina;
    background-color: var(--dark);


footer h2 
    font-size: 20px;
    color: var(--white);

<!DOCTYPE html>
<html lang="en-us">

  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./Assets/style.css">
    <title>Portfolio</title>
  </head>

  <body>
    <header>
      <h1><span>MR</span></h1>
      <section>
        <ul>
          <li>
            <a href="#aboutMe">About me</a>
          </li>
          <li>
            <a href="#work">Work</a>
          </li>
          <li>
            <a href="#contactMe">Contact me</a>
          </li>
        </ul>
      </section>
    </header>

    <section class="headerImg">
      <img src="https://via.placeholder.com/512x212">
    </section>

    <section class="content">

      <section id="aboutMe" class="sections">
        <h2 class="float-right">About Me</h2>
        <img src="https://via.placeholder.com/200" class="float-left" />
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam, laudantium nihil explicabo maxime
          molestias nam earum commodi eligendi at eaque perferendis dolorem temporibus alias repudiandae est
          assumenda, illum quas! Ipsam!
        </p>
      </section>

      <section id="work" class="sections">
        <h2 class="float-left">Work</h2>
        <a href="https://github.com"><img id="firstWeb" src="https://via.placeholder.com/150" /></a>
        <div class="work-content">
          <a href="https://github.com"><img class="workImg" src="https://via.placeholder.com/150" /></a>
        <a href="https://github.com"><img class="workImg" src="https://via.placeholder.com/150" /></a>
        <a href="https://github.com"><img class="workImg" src="https://via.placeholder.com/150" /></a>
        <a href="https://github.com"><img class="workImg" src="https://via.placeholder.com/150" /></a>
        </div>
      </section>

      <section id="contactMe" class="sections">
        <h2 class="float-right">Contact Me</h2>
        <ul>
          <li>
            <a href="https://github.com">Github</a>
          </li>
          <li>
            <a href="https://LinkedIn.com">LinkedIn</a>
          </li>
          <li>
            <a>@gmail.com</a>
          </li>
          <li>
            <a>55XXXX</a>
          </li>
        </ul>
      </section>

    </section>

    <footer>
      <h2>Made with ❤️️</h2>
    </footer>
  </body>

</html>

【讨论】：

以上是关于CSS 部分重叠且图像未居中的主要内容，如果未能解决你的问题，请参考以下文章

CSS 背景图像动画重叠一切。希望能够点击此链接

将导航定位在具有重叠 div 的下标题边框上 (HTML/CSS)

两个子元素重叠居中

css - 防止图像与 div 重叠

显示图片重叠的css元素[重复]

float-css 在 div 图像旁边重叠