Fatal编程技术网
  • html/
  • 在html和css中调整收缩大小

在html和css中调整收缩大小

html css

在html和css中调整收缩大小,html,css,Html,Css,我试图在页面的顶部中间构建一个标题，其中有两个名称，中间有一个环。我也有一张图片集中在页面的中间。在我调整大小之前，在全屏笔记本电脑上一切看起来都很好 浏览器和所有东西都在移动，看起来乱七八糟。我读了很多书 每个人都说在你的div中使用一个最小宽度和用户百分比的包装器。读了一个星期的书，我就想不出来了 还有我能做的一切 HTML: 如果使用position:relative而不是位置：绝对 您没有正确地关闭div class=“Michael”>您忘记了关闭div标记中的/ 我没有这张照片，但我

我试图在页面的顶部中间构建一个标题，其中有两个名称，中间有一个环。我也有一张图片集中在页面的中间。在我调整大小之前，在全屏笔记本电脑上一切看起来都很好 浏览器和所有东西都在移动，看起来乱七八糟。我读了很多书 每个人都说在你的div中使用一个最小宽度和用户百分比的包装器。读了一个星期的书，我就想不出来了 还有我能做的一切

HTML:

如果使用
position:relative而不是
位置：绝对

您没有正确地关闭
div class=“Michael”>
您忘记了关闭div标记中的/

我没有这张照片，但我想出了一个屏幕宽度可以达到500px的东西

HTML:


下面是一个fiddle的链接：
请正确设置代码格式。它很有效，谢谢你，但我不明白你为什么把div“包装器”弄得这么小。我认为包装器div需要非常大。刚刚开始学习。它还将所有3个标题向下拉了至少5倍，超过了我的顶部横幅，进入了我的中间横幅。当调整大小时，我的图片向下移动了大约4倍。谢谢你的帮助，但是在这一周左右，这是相当令人沮丧的使用包装不能是页面的全宽。如果您希望包装器是页面的完整部分。我建议在包装器中使用它：
.wrapper{width:100%；height:auto；display:flex；flex-wrap:wrap；justify-content:center；}
现在注意到包装纸没有任何末端标记，我尝试使用你的建议作为包装纸和克里斯蒂娜班级。我尝试使用你的建议作为包装纸，克里斯蒂安班级在屏幕上移动得更远，而ring和michael则下降了约4英寸。我不知道该怎么办。在这个问题上，一周来似乎没有任何进展。

<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>



.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%;
  }



    <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> 



.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%;
  }