Question

我正在尝试在页面的顶部中心构建一个标题，其中有两个名称，并且介于两者之间。我还有一个位于页面中间的图片。在我调整大小之前，全屏笔记本电脑上的一切看起来都不错浏览器和一切都移动，看起来混乱。我读了很多帖子，每个人都说使用包含最小宽度和用户百分比的包装以及div中的包装。经过一周的阅读后，我无法解决这个问题以及我可能做的一切。

HTML：

<body> 
    <div class="wrapper">
        <div class="michael">
            <p class="m">Michael</p>
        <div> 
        <div class="ringhead">
            <img  src="Images/gold.gif" class="ring"  alt="Wedding Ring" width="100" height="60">
        </div>
        <div class="christina">
            <p class="c">Christina</p> 
        </div> 
        <div class="weddingWebsite">
            <img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website;">
        </div> 
</body>
</html>

CSS：

.wrapper {
    min-width: 940px;
    margin: 0 auto;
    padding: 0 5%;  
}

.michael{    
    color:#EEE8AA;
    position: fixed;    
    text-transform: uppercase;
    font-size: 30px;
    max-width: 100%;
    max-height: 100%;
    left: 30%;
    top: 0%;     
} 

.m{
    max-width: 100%;
    max-height 100%;     
}

.ringhead{
    position: fixed;
    max-width: 100%;
    max-height: 100%;
    left: 50%;
    top: 4%;    
} 

.ring{
 max-width: 100%;
 max-height: 100%;
} 

.christina{
     color:#EEE8AA;
     position: fixed;
     left: 70%;
     top: 0%;
     text-transform: uppercase;
     font-size: 30px;
     max-width:100%;
     max-height: 100%;
 }

 .c{
     max-width: 100%;
     max-height: 100%;   
 } 

 body{ 
     background-image: url("Images/Top Banner.jpg"), url("Images/MiddleBanner.jpg"), url("Images/Bottom Banner.png");
     background-size: 100% 10%, 100% 15%, 100% 100%;  
     background-repeat: no-repeat;
     background-attachment: fixed;   
 }

 .weddingWebsite{
     position: fixed;
     top: 65%;
     left: 65%;
     transform: translateX(-65%) translateY(-65%);
     max-width: 80%;
     max-height: 60%; 
  }
  .wedding{
      max-width: 80%;
      max-height: 60%;
  }

Answer 1

如果您使用position: relative;代替position: absolute;

，可能会更容易

你没有正确地关闭div class="Michael">你忘了关闭div标签中的/。

我没有这张照片，但想出了屏幕宽度低至500px的东西。

HTML：

    <div class="wrapper">
            <div class="michael">
                <p class="m">Michael</p>
                </div> 
            <div class="ringhead">
                <img  src="Images/gold.gif" class="ring"  alt="Wedding Ring" `enter code here`width="100" height="60">
            </div>
            <div class="christina">
                <p class="c">Christina</p> 
            </div> 
            <div class="weddingWebsite">
                <img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website;">
  </div>

CSS：

.wrapper {
    width: 479px;
    height: 100px;
    margin: 0 auto;
    /* padding: 0 5%; */
    display: block;
}

.michael {
    color: #EEE8AA;
    position: relative;
    text-transform: uppercase;
    font-size: 30px;
    width: 200px;
    float: left;
    display: inline-block;
    border: 1px solid black;
    /* max-width: 100%; */
    /* max-height: 100%; */
    /* left: 30%; */
    /* top: 0%; */
}

.m{
    max-width: 100%;
    max-height 100%;     
}

.ringhead {
    position: relative;
    /* max-width: 100%; */
    /* max-height: 100%; */
    float: left;
    border: 1px solid black;
    display: inline-block;
    /* left: 50%; */
    /* top: 4%; */
}

.ring{
 max-width: 100%;
 max-height: 100%;
} 

.christina {
    color: #EEE8AA;
    position: relative;
    float: left;
    border: 1px solid black;
    /* top: 0%; */
    text-transform: uppercase;
    font-size: 30px;
    /* max-width: 100%; */
    /* max-height: 100%; */
}

 .c{
     max-width: 100%;
     max-height: 100%;   
 } 

 body{ 
     background-image: url("Images/Top Banner.jpg"), url("Images/MiddleBanner.jpg"), url("Images/Bottom Banner.png");
     background-size: 100% 10%, 100% 15%, 100% 100%;  
     background-repeat: no-repeat;
     background-attachment: fixed;   
 }

 .weddingWebsite{
     position: fixed;
     top: 65%;
     left: 65%;
     transform: translateX(-65%) translateY(-65%);
     max-width: 80%;
     max-height: 60%; 
  }
  .wedding{
      max-width: 80%;
      max-height: 60%;
  }

以下是小提琴的链接：https://fiddle.jshell.net/hzxsvLzz/1/

调整html和css中的缩小

1 个答案: