Question

我正在尝试制作一个报纸型页脚我把所有事情都搞定了问题是我在报纸<div>内有2 <div class = "newspaper"个，每个都有1 <p>。
但是，第一个<p>在垂直线的两边分开你可以在这看到它，但如果你不这样做，那么：复制代码并将其粘贴到记事本中然后用浏览器打开它将鼠标悬停在“FeedBack”上。
它将被概述为现在你应该看到垂直线另一侧的轮廓框的一部分如果你没有，那么尝试改变浏览器的大小有什么方法可以避免这种情况吗？

p {
  font-size: 20px;
  font-family: Comic Sans MS;
}

footer {
  position: relative;
  top: 10px;
  background-color: #316441;
  border: solid black 2px;
}

.con {
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
}

.contact {
  color: white;
  font-weight: 5px;
  font-size: 40px;
}

.fol {
  margin-left: 10px;
  margin-right: 10px;
  text-align: left;
}

.follow {
  color: white;
  font-weight: 5px;
  font-size: 40px;
}

a.email {
  position: relative;
  top: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

a.feedback {
  position: relative;
  top: 17px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

a.feedback:hover,
a.email:hover {
  outline: 2px white solid;
  padding: 5px;
}

.sm {
  padding: 8px;
  font-size: 30px !important;
  text-align: center;
  text-decoration: none;
  border: white 2px solid;
  border-radius: 5px;
  background-color: black;
  color: white;
}

.newspaper {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-rule: 2px #d3d3d3 solid;
  -moz-column-rule: 2px #d3d3d3 solid;
  column-rule: 2px #d3d3d3 solid;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <footer>
    <div class="newspaper">
      <div class="con">
        <p><span class="contact">Contact Us: </span><br><a href="javascrit:void(0)" class="email"><i class="fa fa-envelope-o" aria-hidden="true"></i> Email: HyperMathsMail<span style="font-family: 'New Times Roman'">&#64;</span>gmail.com</a><br>
          <a href="C:/Users/imadhami/Desktop/Do Not Open/feedback.html" class="feedback" target="_blank"><i class="fa fa-comments-o" aria-hidden="true"></i> FeedBack</a></p>
      </div>
      <div class="fol">
        <p><span class="follow">Follow Us: </span><span style="position: relative;left: 5px;"><br><a href="javascript:void(0)" class="fa fa-google-plus sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-twitter sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-facebook sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-linkedin sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-instagram sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-pinterest sm fa-fw"></a> <a href = "javascript:void(0)" class="fa fa-youtube-play sm fa-fw" ></a></span></p>
      </div>
    </div>
  </footer>
</body>

</html>

Answer 1

用column-count替换display: flex似乎可以为您提供相同的结果并解决问题？

＆＃13;

p {
  font-size: 20px;
  font-family: Comic Sans MS;
}

footer {
  position: relative;
  top: 10px;
  background-color: #316441;
  border: solid black 2px;
}

.con {
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
  border-right: 3px solid white;
}

.contact {
  color: white;
  font-weight: 5px;
  font-size: 40px;
}

.fol {
  margin-left: 10px;
  margin-right: 10px;
  text-align: left;
}

.follow {
  color: white;
  font-weight: 5px;
  font-size: 40px;
}

a.email {
  position: relative;
  top: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

a.feedback {
  position: relative;
  top: 17px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

a.feedback:hover,
a.email:hover {
  outline: 2px white solid;
  padding: 5px;
}

.sm {
  padding: 8px;
  font-size: 30px !important;
  text-align: center;
  text-decoration: none;
  border: white 2px solid;
  border-radius: 5px;
  background-color: black;
  color: white;
}

.newspaper {
display: flex;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <footer>
    <div class="newspaper">
      <div class="con">
        <p><span class="contact">Contact Us: </span><br><a href="javascrit:void(0)" class="email"><i class="fa fa-envelope-o" aria-hidden="true"></i> Email: HyperMathsMail<span style="font-family: 'New Times Roman'">&#64;</span>gmail.com</a><br>
          <a href="C:/Users/imadhami/Desktop/Do Not Open/feedback.html" class="feedback" target="_blank"><i class="fa fa-comments-o" aria-hidden="true"></i> FeedBack</a></p>
      </div>
      <div class="fol">
        <p><span class="follow">Follow Us: </span><span style="position: relative;left: 5px;"><br><a href="javascript:void(0)" class="fa fa-google-plus sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-twitter sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-facebook sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-linkedin sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-instagram sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-pinterest sm fa-fw"></a> <a href = "javascript:void(0)" class="fa fa-youtube-play sm fa-fw" ></a></span></p>
      </div>
    </div>
  </footer>
</body>

</html>

＆＃13;

Answer 2

我建议您不要在top和a.email CSS选择器上使用a.feedback属性。像这样定位的元素变得难以维护，并导致奇怪的问题，例如您目前所遇到的问题。

删除top和position: relative CSS属性，为这两个元素添加display: block，最后，您可以根据需要使用padding创建空格：

a.email {
  padding: 10px 5px;
  display: block;
  color: white;
  text-decoration: none;
}

a.feedback {
  padding: 10px 5px;
  display: block;
  color: white;
  text-decoration: none;
}

This answer提供了有关避免position: relative top的原因的详细信息。

Answer 3

您不必使用列数，因为您确切知道每列中的内容。列数对于大文本很有用，但我认为这不是你需要的。您可以使用display：table。

＆＃13;

p {
  font-size: 20px;
  font-family: Comic Sans MS;
}

footer {
  position: relative;
  top: 10px;
  background-color: #316441;
  border: solid black 2px;
  display:table ;
  width:100% ;
}

.newspaper {
  display:table-row ;
}

.newspaper>div {
  display:table-cell ;
  padding: 0 10px;
}

.newspaper>div.con {
  border-right:3px solid white ;
}

.contact {
  color: white;
  font-weight: 5px;
  font-size: 40px;
}

.follow {
  color: white;
  font-weight: 5px;
  font-size: 40px;
}

a.email {
  position: relative;
  top: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

a.feedback {
  position: relative;
  top: 17px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

a.feedback:hover,
a.email:hover {
  outline: 2px white solid;
  padding: 5px;
}

.sm {
  padding: 8px;
  font-size: 30px !important;
  text-align: center;
  text-decoration: none;
  border: white 2px solid;
  border-radius: 5px;
  background-color: black;
  color: white;
}

.newspaper div:first-child() {
  border-right:1px solid white ;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <footer>
    <div class="newspaper">
      <div class="con">
        <p><span class="contact">Contact Us: </span><br><a href="javascrit:void(0)" class="email"><i class="fa fa-envelope-o" aria-hidden="true"></i> Email: HyperMathsMail<span style="font-family: 'New Times Roman'">&#64;</span>gmail.com</a><br>
          <a href="C:/Users/imadhami/Desktop/Do Not Open/feedback.html" class="feedback" target="_blank"><i class="fa fa-comments-o" aria-hidden="true"></i> FeedBack</a></p>
      </div>
      <div class="fol">
        <p><span class="follow">Follow Us: </span><span style="position: relative;left: 5px;"><br><a href="javascript:void(0)" class="fa fa-google-plus sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-twitter sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-facebook sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-linkedin sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-instagram sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-pinterest sm fa-fw"></a> <a href = "javascript:void(0)" class="fa fa-youtube-play sm fa-fw" ></a></span></p>
      </div>
    </div>
  </footer>
</body>

</html>

＆＃13;

分散在报纸上

3 个答案: