个人中心
gpt4 book ai didi

html - 最小化浏览器时我的部分布局被截断

转载 作者：行者123 更新时间：2023-11-28 07:33:29 25 4
gpt4 key购买 nike

正如您在第一张图片中看到的，当浏览器最小化时，边框被切断。第二张图片是它在所有屏幕尺寸上的外观。我的一些页面遇到了这个问题，我花了一些时间试图解决这个问题，但没有成功。任何帮助表示赞赏!如果您需要更多代码片段，请告诉我。我附上了 jsfiddle，但它真的很困惑，可能很难看出问题所在。如果您调整浏览器的大小，全屏版本会更容易一些。

https://jsfiddle.net/w95n3x0L/

https://jsfiddle.net/w95n3x0L/embedded/result/ 

  <body>
   <div id="main">
       <div id="container">
            <header>
            <div id="rainbow">
                <img src="images/rainbow.png" alt="rainbow gradient">
            </div>
            <div id="header">

                <!--home-->

                <p id="logo"><img src="images/logo.png" alt="Bethan Rainforth a comedic dancer">
                </p>

            </div>

            <div id="nav-bar">

                <nav>

                    <ul id="paint-splatters">
                        <li><a href="index.html" id="home">Home</a>
                        </li>
                        <li><a href="work.html" class="gray">Work</a>
                        </li>
                        <li><a href="gallery.html" class="gray">Gallery</a>
                        </li>
                        <li><a href="hireme.html" class="gray">Hire!</a>
                        </li>


                    </ul>

                </nav>
            </div>
    </div>
    </header>
    <div id="wrapper">
        <img src="images/pic.png" alt="Bethan Rainforth" class="pic">
        <p id="about-text">I am a physical comedian, continuously being inspired by comical characters and exaggerated movement. I fuse elements of dance and theatre to create performances that are somewhat over-the-top, and outrageous. I use locking technique as a foundation build and produce uproarious performances suitable for an eclectic audience. I aim to leave audience members feeling uplifted, swimming in their own tears of laughter, momentarily forgetting any worries or woes. </p>
    </div>
</div>


<div id="my-work">
    <div class="leftrule"></div>
    <p id="work">My Work!</p>
    <div class="rightrule"></div>
</div>

    <div class="dancer2">
      <img src="images/dancer1.png">
    </div>
     <div class="dancer1">
      <img src="images/dancer2.png">
    </div>
    <div id="footer">
    <div class="container">
        <div class="dancerfoot">
            <img src="images/dancerfoot.png" alt="dancer jumping over footer">
        </div>
        <div class="danceleft">
            <img src="images/danceleft.png" alt="dancer to the left kicking">
        </div>
        <div class="danceright" >
            <img src="images/danceright.png" alt="dancer to the right shaking it">
        </div>
        <footer>&copy; 2015 Bethan Rainforth


        </footer>
        </div>

        </div>

        </body>



  html,
  body {
background-image: url(images/background.png);
width: 989px;
margin: 0 auto;
min-height: 100%;
 }
#main {
max-width: 940px;
 }
#header {
margin-top: 60px;
}


#rainbow img {
width: 120%;
margin-bottom: 12px;
}
 nav a {
font-family: Hobo Std;
padding: 50px;
}
ul {
list-style-type: none;
}
nav {
text-align: center;
margin-left: 20px;
 }

#nav-bar {
margin-left: -40px;
}
 a {
text-decoration: none;
}
nav li {
display: inline;
width: 150px;
}
   .gray,
  a:hover,
 a:visited,
 a:active {
color: #a5a5a5;
text-decoration: none;
 }
footer {
color: #fff;
text-align: center;
overflow: hidden;
margin-top: 37%;
}
#work {
color: #a5a5a5;
font-family: Hobo Std;
font-size: 1.3em;
text-align: center;
}

#logo img {
width: 320px;
margin-top: -60px;
}

img.pic {
width: 260px;
float: left;
margin-left: 70px;
margin-top: 68px;
}
#wrapper {
background-image: url(images/border.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 730px;
height: 490px;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: -70px;
 }
#home {
background-image: url(images/pinkpaint.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 30px;
margin: 0 auto;
color: #000;
}
div#video1 {
float: right;
border: 15px solid #373636;
box-shadow: 0px 0px 0px 8px rgba(55, 54, 54, .3);
background-color: #373636;
height: 100%;
text-align: center;

}
div#video2 {
border: 15px solid #373636;
box-shadow: 0px 0px 0px 8px rgba(55, 54, 54, .3);
width: 49.6%;
margin: 0 -2em;
background-color: #373636;
height: 100%;
text-align: center;
}
.videos {
margin-top: 65px;

}
 iframe {
 margin-top: 5px;
}
p#about-text {
font-family: Hobo Std;
color: #7ca5d2;
font-size: 1.2em;
line-height: 35px;
margin: 75px;
padding-top: 68px;
}

div.dancer2 {
margin-left: 80.5%;
margin-bottom: -20%;
position: relative;
top: -130px;
}
div.dancer2 img {
width: 200px;
}

div.dancer1 {
margin-bottom: -30%;
position: relative;
top: -230px;
}
div.leftrule {
border-top: 2px solid #a5a5a5;
width: 80px;
margin-left: 360px;
margin-bottom: -11px;
}
div.rightrule {
border-top: 2px solid #a5a5a5;
width: 80px;
margin-left: 546px;
margin-top: -26px;
}
div.dancerfoot img {
width: 30%;
margin-left: 35%;
margin-top: 200px;
position: absolute;
top: 0;
left: 0;
}
div.danceleft img {
width: 20%;
margin-top: 19%;
position: absolute;
top: 0;
left: 0;
}
div.danceright img {
width: 20%;
margin-left: 85%;
position: absolute;
top: 0;
left: 0;
margin-top: 14%;
 }
#footer {
position: relative;
margin-top: -100px;
}
#website {
text-align: right;
}

enter image description here

enter image description here

最佳答案

放置一些像
这样的media_quires

@media (max-width:1030px){div#video1{float:none;}}

关于html - 最小化浏览器时我的部分布局被截断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31365610/

25 4 0
文章推荐： c++ - 通过树状系统进行高效迭代
文章推荐： ios - UIcollectionViewCell 中 UITableView 的动态高度
文章推荐： swift - 完成处理程序的返回值未在 DispatchQueue.main.async block 中更新
文章推荐： Swift 将字符串转换为数据缓冲区
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com