Question

我正在尝试在“解决4成功”和“成员”文本的左侧插入一个蓝色框。我正在尝试使它们直接位于顶部，文本框位于左侧。如果我的解释令人困惑，这是一张图片。请告诉我您能否提供帮助。我是HTML和CSS的新手，所以可以帮上什么忙。谢谢

@font-face {
  font-family: 'futuralight';
  src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'),
       url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'tekoregular';
  src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'),
       url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'playfair_displayregular';
  src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'),
       url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'poppinsmedium';
  src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'),
       url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
*{
    margin:0px;
    padding:0px;
    border:0px;
}
.topnav {
    background-color: rgb(84,104,217);
    overflow: hidden;
    font-family: 'futuralight';
    font-weight:900;
 }
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 20px 21px;
    text-decoration: none;
    font-size: 19px;
    position: relative;
    left:2%;
  }
  .topnav a:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 6px;
    left: 8%;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }
 .topnav a:hover:before {
    visibility: visible;
    transform: scaleX(1);
  }
.topnav a.active-menu:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom:6px;
    left: 8%;
    background-color: white;
    visibility: visible;
    transform: scaleX(1);
    transition: all 0.3s ease-in-out 0s; 
    }
  .bigcomser{
    text-align:center;
    font-size: 80px;
  }
.bodycs{
  background-color:  #EEF0FC;
  height:8000px;
}
.comser{
  font-family: 'tekoregular';
  padding-top:42px;
  font-family: 'playfair_displayregular';
  font-weight:900;
}
.abtcomser{
  padding-top: 48px;
  padding-bottom: 28px;
  font-size: 20px;
  position: relative;
  left:10%;
  width:80%;
}
.s4s{
  position: relative;
  left:10%;
  margin-top:60px;
  height:350px;
  width:80%;
  background-color: white;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
}
.s4simage{
  width:38.3%;
  position: absolute;
  right:0%;
  padding-top:10px;
  padding-right:10px;
}
.s4stitle{
  position: relative;
  left:4%;
  padding-top:30px;
  color:rgb(84,104,217);
  font-weight:900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
}
.s4slink{
  text-decoration:none;
  color:rgb(84,104,217);
}
.titles4s{
  padding-top:2px;
  font-size:22px;
  padding-left:4%;
  font-family: 'futuralight';
  font-weight:300;
}
.s4sparagraph{
  width:55%;
  position: relative;
  left:4%;
  font-size:17px;
  top:60px;  
  font-family: 'futuralight';
}
.bluebox{
  background-color: rgb(84,104,217);
  padding-top: 80px;
  width:2%;
  position: relative;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"  href="../CSS/stylecomser.css" />
    <title>Community Service</title>
</head>
<body class='bodycs'>
    <header class="topnav" id="topnav">
        <a class="link" href="../index.html">Home</a>
        <a class="link" href="#Academics">Academics</a>
        <a class="link" href="#Projects">Projects</a>
        <a class="active-menu" href="../Pages/communityservice.html">Community Service</a>
      </header>
      <div class='bigcomser'>
        <p class='comser'>
            Community Service
        </p>
      </div>
      <div class='abtcomser'>
        <p>Lorem, ipsum dolor sit amet consectetur adipisici
            ng elit. Dicta, libero! Recusandae provident est quam quisquam.
             Sequi itaque suscipit tempore corrupti officia maxime 
             nihil consequatur perspiciatis repellat placeat sed, voluptatum vitae.lor
             em Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro similique, prov
             ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est
              distinctio commodi quod aut numquam temporibus?
        </p>
    </div>
    <div class='s4s'>
        <img class='s4simage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
        <p class='s4stitle'>
            <a class='s4slink' href="https://www.solve4success.org" target="_blank">Solve 4 Success</a>
        </p>
        <div class='bluebox'>
        </div>
        <p class='titles4s'>
            Member
        </p>
        <p class='s4sparagraph'>
            Lorem ipsum dolor sit amet consectetu
            r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re
            pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver
            itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet 
            consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll
            itia dicta error aliquam aliquid aperiam est repellat iure vitae
            bum exercitationem nihil, accusam
            us libero.
        </p>
    </div>
    
</body>
</html>

Answer 1

使用.bluebox将::before替换为position: absolute;元素。并将.s4slink和.titles4s放在.s4stitle中。现在，左行的高度将是两个标题高度的总和。请看。

@font-face {
  font-family: 'futuralight';
  src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'),
       url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'tekoregular';
  src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'),
       url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'playfair_displayregular';
  src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'),
       url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'poppinsmedium';
  src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'),
       url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
*{
    margin:0px;
    padding:0px;
    border:0px;
}
.topnav {
    background-color: rgb(84,104,217);
    overflow: hidden;
    font-family: 'futuralight';
    font-weight:900;
 }
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 20px 21px;
    text-decoration: none;
    font-size: 19px;
    position: relative;
    left:2%;
  }
  .topnav a:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 6px;
    left: 8%;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }
 .topnav a:hover:before {
    visibility: visible;
    transform: scaleX(1);
  }
.topnav a.active-menu:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom:6px;
    left: 8%;
    background-color: white;
    visibility: visible;
    transform: scaleX(1);
    transition: all 0.3s ease-in-out 0s; 
    }
  .bigcomser{
    text-align:center;
    font-size: 80px;
  }
.bodycs{
  background-color:  #EEF0FC;
  height:8000px;
}
.comser{
  font-family: 'tekoregular';
  padding-top:42px;
  font-family: 'playfair_displayregular';
  font-weight:900;
}
.abtcomser{
  padding-top: 48px;
  padding-bottom: 28px;
  font-size: 20px;
  position: relative;
  left:10%;
  width:80%;
}
.s4s{
  position: relative;
  left:10%;
  margin-top:60px;
  height:350px;
  width:80%;
  background-color: white;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
}
.s4simage{
  width:38.3%;
  position: absolute;
  right:0%;
  padding-top:10px;
  padding-right:10px;
}
.s4stitle{
  position: relative;
  left:4%;
  padding-top:30px;
  color:rgb(84,104,217);
  font-weight:900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
}
.s4stitle::before {
  content: '';
  background-color: rgb(84,104,217);
  width:10px;
  height: 100%;
  position:absolute;
  left: -4%; 
  top: 30px; /* = padding-top of parent */
}
.s4slink{
  text-decoration:none;
  color:rgb(84,104,217);
}
.titles4s{
  padding-top:2px;
  font-size:22px;
  padding-left:4%;
  font-family: 'futuralight';
  font-weight:300;
}
.s4sparagraph{
  width:55%;
  position: relative;
  left:4%;
  font-size:17px;
  top:60px;  
  font-family: 'futuralight';
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"  href="../CSS/stylecomser.css" />
    <title>Community Service</title>
</head>
<body class='bodycs'>
    <header class="topnav" id="topnav">
        <a class="link" href="../index.html">Home</a>
        <a class="link" href="#Academics">Academics</a>
        <a class="link" href="#Projects">Projects</a>
        <a class="active-menu" href="../Pages/communityservice.html">Community Service</a>
      </header>
      <div class='bigcomser'>
        <p class='comser'>
            Community Service
        </p>
      </div>
      <div class='abtcomser'>
        <p>Lorem, ipsum dolor sit amet consectetur adipisici
            ng elit. Dicta, libero! Recusandae provident est quam quisquam.
             Sequi itaque suscipit tempore corrupti officia maxime 
             nihil consequatur perspiciatis repellat placeat sed, voluptatum vitae.lor
             em Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro similique, prov
             ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est
              distinctio commodi quod aut numquam temporibus?
        </p>
    </div>
    <div class='s4s'>
        <img class='s4simage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
        <p class='s4stitle'>
            <a class='s4slink' href="https://www.solve4success.org" target="_blank">Solve 4 Success</a>
            <p class='titles4s'>
            Member
            </p>
        </p>
        
        <p class='s4sparagraph'>
            Lorem ipsum dolor sit amet consectetu
            r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re
            pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver
            itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet 
            consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll
            itia dicta error aliquam aliquid aperiam est repellat iure vitae
            bum exercitationem nihil, accusam
            us libero.
        </p>
    </div>
    
</body>
</html>

如何在标题和简介框的左侧添加彩色框

1 个答案: