时间戳

首页 > 解决方案 > 文本重叠列在 100% 处大约 700 像素

html - 文本重叠列在 100% 处大约 700 像素

问题描述

有这个工作正常，但后来它最近坏了。在 1500 像素处，列系统变成一个 100% 宽度的列，但由于某种原因，文本在 700 像素左右离开屏幕，我不明白为什么。底部的文本可以正常工作，导航栏也可以正常工作，但是出于某种原因，文本会中断。

网址：liammacalister.com

<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="utf-8"/>    
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    
    <link rel="stylesheet" href="homeStyle.css">

    <title>Liam Macalister - Home</title>
    
</head>
    <div class="header">
        <h1>Liam Macalister - Portfolio</h1>
    </div>

    <ul class="topnav">
        <li><a href="#header">Home</a></li>
        <li><a href="#aboutContent">About Me</a></li>
        <li><a href="#unityContent">Unity</a></li>
        <li><a href="#unrealContent">Unreal</a></li>
        <li><a href="#cvContent">CV</a></li>
        <li><a href="#footer">Contact</a></li>
    </ul>

    <div class="row">
        <div class="column">
            <h2>Left Text</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit. 
                Ut fringilla luctus tortor, in tempus sapien euismod vitae. Donec suscipit sagittis malesuada. 
                Ut non diam vitae tellus ultricies molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada 
                fames ac turpis egestas. Pellentesque ac ante sollicitudin neque commodo euismod eu vel urna. 
                Nullam molestie nulla lorem, quis congue leo egestas sit amet.
                Vivamus at aliquam justo. Suspendisse dictum, massa eu commodo cursus, lorem lacus fermentum arcu, 
                quis mattis est felis quis neque. Mauris vitae urna tempor, mattis elit et, lobortis dui. 
                Donec faucibus faucibus dolor, eu varius velit egestas vitae. Proin ac tincidunt nulla, vel imperdiet nibh. 
                Vivamus et tellus turpis. Quisque ac ultrices nisl, a ullamcorper velit. Duis scelerisque consequat lacus, 
                sit amet vulputate lorem rhoncus ac. Suspendisse luctus quam at tincidunt varius.
                Sed quis est sed odio consequat gravida. Phasellus convallis erat sed turpis interdum, eu facilisis ipsum aliquet. 
                Sed semper purus nec purus elementum volutpat. Curabitur iaculis tristique hendrerit. 
                Aenean ullamcorper enim gravida odio maximus, et tincidunt leo varius. Donec porta sapien ac risus elementum eleifend. 
                Suspendisse potenti. In hac habitasse platea dictumst. Etiam mi est, suscipit vel nunc sit amet, laoreet molestie risus. 
                Praesent placerat dolor libero, imperdiet porta libero imperdiet ultricies. Nulla tincidunt nunc augue, 
                a dignissim purus porta in. Donec eget ligula dictum magna bibendum volutpat eu id diam. Praesent semper sem neque. 
                Vivamus in dolor libero.
                Aliquam tempus viverra est, ac feugiat ligula sagittis a. In hac habitasse platea dictumst. Integer nec enim leo. 
                Fusce hendrerit erat enim. Nam vehicula augue non augue consequat, sit amet rhoncus est maximus. Quisque sit amet nunc nisi.
                Vivamus consequat dictum lorem sit amet vehicula. Nam aliquet pellentesque lacus, non iaculis nisi pretium at. 
                Aliquam ornare facilisis rhoncus. Donec sit amet sem quis nulla vulputate hendrerit ultrices in nunc. 
                Quisque at molestie lectus. Aenean elementum vehicula nulla, id fermentum lorem mollis quis. Ut ac risus aliquet, 
                pulvinar nunc eu, convallis nulla. Vivamus molestie mattis mi, vitae pellentesque dolor accumsan non. 
                Vestibulum in tempor urna. Mauris eu dignissim quam, in congue turpis. Sed dolor ligula, pulvinar in tortor quis, 
                vehicula auctor mauris. In posuere nibh neque, quis tincidunt felis maximus ut. 
                In laoreet nunc quis sapien convallis dictum. Mauris ex neque, lobortis et metus vitae, sodales tristique lacus. 
                Cras eget blandit elit. Aenean vestibulum lectus at quam commodo posuere. Donec eu elit posuere, tempus turpis eget, 
                placerat sem. Nam augue nisl, ultricies quis felis et, dictum gravida odio.
            </p>
        </div>
        <div class="column">
            <img class="imgMe" src="Me.jpg" alt="Me">               
        </div>
        <div class="column">
            <h2>Right Text</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit. 
                Ut fringilla luctus tortor, in tempus sapien euismod vitae. Donec suscipit sagittis malesuada. 
                Ut non diam vitae tellus ultricies molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada 
                fames ac turpis egestas. Pellentesque ac ante sollicitudin neque commodo euismod eu vel urna. 
                Nullam molestie nulla lorem, quis congue leo egestas sit amet.
                Vivamus at aliquam justo. Suspendisse dictum, massa eu commodo cursus, lorem lacus fermentum arcu, 
                quis mattis est felis quis neque. Mauris vitae urna tempor, mattis elit et, lobortis dui. 
                Donec faucibus faucibus dolor, eu varius velit egestas vitae. Proin ac tincidunt nulla, vel imperdiet nibh. 
                Vivamus et tellus turpis. Quisque ac ultrices nisl, a ullamcorper velit. Duis scelerisque consequat lacus, 
                sit amet vulputate lorem rhoncus ac. Suspendisse luctus quam at tincidunt varius.
                Sed quis est sed odio consequat gravida. Phasellus convallis erat sed turpis interdum, eu facilisis ipsum aliquet. 
                Sed semper purus nec purus elementum volutpat. Curabitur iaculis tristique hendrerit. 
                Aenean ullamcorper enim gravida odio maximus, et tincidunt leo varius. Donec porta sapien ac risus elementum eleifend. 
                Suspendisse potenti. In hac habitasse platea dictumst. Etiam mi est, suscipit vel nunc sit amet, laoreet molestie risus. 
                Praesent placerat dolor libero, imperdiet porta libero imperdiet ultricies. Nulla tincidunt nunc augue, 
                a dignissim purus porta in. Donec eget ligula dictum magna bibendum volutpat eu id diam. Praesent semper sem neque. 
                Vivamus in dolor libero.
                Aliquam tempus viverra est, ac feugiat ligula sagittis a. In hac habitasse platea dictumst. Integer nec enim leo. 
                Fusce hendrerit erat enim. Nam vehicula augue non augue consequat, sit amet rhoncus est maximus. Quisque sit amet nunc nisi.
                Vivamus consequat dictum lorem sit amet vehicula. Nam aliquet pellentesque lacus, non iaculis nisi pretium at. 
                Aliquam ornare facilisis rhoncus. Donec sit amet sem quis nulla vulputate hendrerit ultrices in nunc. 
                Quisque at molestie lectus. Aenean elementum vehicula nulla, id fermentum lorem mollis quis. Ut ac risus aliquet, 
                pulvinar nunc eu, convallis nulla. Vivamus molestie mattis mi, vitae pellentesque dolor accumsan non. 
                Vestibulum in tempor urna. Mauris eu dignissim quam, in congue turpis. Sed dolor ligula, pulvinar in tortor quis, 
                vehicula auctor mauris. In posuere nibh neque, quis tincidunt felis maximus ut. 
                In laoreet nunc quis sapien convallis dictum. Mauris ex neque, lobortis et metus vitae, sodales tristique lacus. 
                Cras eget blandit elit. Aenean vestibulum lectus at quam commodo posuere. Donec eu elit posuere, tempus turpis eget, 
                placerat sem. Nam augue nisl, ultricies quis felis et, dictum gravida odio.
            </p>
        </div>
    </div>  

    <div id ="aboutContent" class="aboutContent">
        <h2> Second Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit. 
            Ut fringilla luctus tortor, in tempus sapien euismod vitae. Donec suscipit sagittis malesuada. 
            Ut non diam vitae tellus ultricies molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada 
            fames ac turpis egestas. Pellentesque ac ante sollicitudin neque commodo euismod eu vel urna. 
            Nullam molestie nulla lorem, quis congue leo egestas sit amet.
            Vivamus at aliquam justo. Suspendisse dictum, massa eu commodo cursus, lorem lacus fermentum arcu, 
            quis mattis est felis quis neque. Mauris vitae urna tempor, mattis elit et, lobortis dui. 
            Donec faucibus faucibus dolor, eu varius velit egestas vitae. Proin ac tincidunt nulla, vel imperdiet nibh. 
            Vivamus et tellus turpis. Quisque ac ultrices nisl, a ullamcorper velit. Duis scelerisque consequat lacus, 
            sit amet vulputate lorem rhoncus ac. Suspendisse luctus quam at tincidunt varius.
            Sed quis est sed odio consequat gravida. Phasellus convallis erat sed turpis interdum, eu facilisis ipsum aliquet. 
            Sed semper purus nec purus elementum volutpat. Curabitur iaculis tristique hendrerit. 
            Aenean ullamcorper enim gravida odio maximus, et tincidunt leo varius. Donec porta sapien ac risus elementum eleifend. 
            Suspendisse potenti. In hac habitasse platea dictumst. Etiam mi est, suscipit vel nunc sit amet, laoreet molestie risus. 
            Praesent placerat dolor libero, imperdiet porta libero imperdiet ultricies. Nulla tincidunt nunc augue, 
            a dignissim purus porta in. Donec eget ligula dictum magna bibendum volutpat eu id diam. Praesent semper sem neque. 
            Vivamus in dolor libero.
            Aliquam tempus viverra est, ac feugiat ligula sagittis a. In hac habitasse platea dictumst. Integer nec enim leo. 
            Fusce hendrerit erat enim. Nam vehicula augue non augue consequat, sit amet rhoncus est maximus. Quisque sit amet nunc nisi.
            Vivamus consequat dictum lorem sit amet vehicula. Nam aliquet pellentesque lacus, non iaculis nisi pretium at. 
            Aliquam ornare facilisis rhoncus. Donec sit amet sem quis nulla vulputate hendrerit ultrices in nunc. 
            Quisque at molestie lectus. Aenean elementum vehicula nulla, id fermentum lorem mollis quis. Ut ac risus aliquet, 
            pulvinar nunc eu, convallis nulla. Vivamus molestie mattis mi, vitae pellentesque dolor accumsan non. 
            Vestibulum in tempor urna. Mauris eu dignissim quam, in congue turpis. Sed dolor ligula, pulvinar in tortor quis, 
            vehicula auctor mauris. In posuere nibh neque, quis tincidunt felis maximus ut. 
            In laoreet nunc quis sapien convallis dictum. Mauris ex neque, lobortis et metus vitae, sodales tristique lacus. 
            Cras eget blandit elit. Aenean vestibulum lectus at quam commodo posuere. Donec eu elit posuere, tempus turpis eget, 
            placerat sem. Nam augue nisl, ultricies quis felis et, dictum gravida odio.</p>
    </div>
    <div id ="unityContent" class="unity">
        
    </div>
    <div id ="unrealContent" class="unreal">
    </div>

    <div id ="cvContent" class="cv">
    </div>

    <div id="footer" class="footer">
        <h2>Contact</h2>
    </div>
</body>
</html>

CSS：

* {
  box-sizing: border-box;
}

@font-face{
  font-family: PermanentMarker;
  src:URL('PermanentMarker.ttf') format('truetype');
}

html {
  scroll-behavior: smooth;
}

body{
  margin: 0;
}

.header {
  font-family: PermanentMarker;
  font-size: 28px;
  padding: 20px;
  text-align: center;
}

h2 {
  font-family: PermanentMarker;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover {background-color: #111;}

ul.topnav li.right {float: right;}

.column {
  float: left;
  width: 33.33%;
  padding: 15px;
  /*font-size: 18px;*/
}

p{
  font-family: Arial, Helvetica, sans-serif;
}
.row {
  content:"";
  display: table;
  clear: both;
}

.imgMe{
  padding-top: 30px;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.aboutContent{
  padding: 15px;
}

.footer {
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px;
}

@media screen and (max-width: 2000px){
  .column{
    width: 50%;
  }
}

@media screen and (max-width: 1500px){
  .column{
    width: 100%;
  }
}

@media screen and (max-width: 600px){
  ul.topnav li.right, 
  ul.topnav li {float: none;
  }
  .column{
    width: 100%;
  }
}

有什么建议吗？

标签： htmlcss

解决方案

而不是使用浮点数，display: table我会使用flex. 2 个示例作为预期结果尚不清楚。

HTML：（2行2列，第2行列向右）

<div class="container">
    <div class="row">
      <div class="col">
        <p>Text LEFT</p>
      </div>
      <div class="col">
        <img src="liamphoto.jpg" alt="">
      </div>
    </div>
    <div class="row-reverse">
      <div class="col">
        <p>Text RIGHT</p>
      </div>
    </div>
  </div>

CSS：

.container {
  padding: 0 15px;
  margin: 0 auto;
  max-width: 1400;
}
.row {
  display: flex;
  height: 100%;
}
.row-reverse {
  display: flex;
  flex-direction: row-reverse;
}
.col {
  height: 100%;
  width: 50%;
  border: solid green;
}
img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 600px) {
  .row {
    display: block;
  }
  .col {
    width: 100%;
  }
}

HTML：（1 行 3 列等宽）

<div class="container">
      <div class="row">
        <div class="col">
          <p>Text LEFT</p>
        </div>
        <div class="col">
          <img src="Me.jpg" alt="">
        </div>
        <div class="col">
          <p>Text RIGHT</p>
        </div>
      </div>
    </div>

CSS：在顶部添加

* {
  margin: 0;
  padding: 0;
}

改变：

.col {
  height: 100%;
  width: 33%;
}

.col根据您的需要调整宽度和媒体查询。

推荐阅读