个人中心
gpt4 book ai didi

CSS 布局 : text overwriting footer, 文本隐藏在图像等后面

转载 作者：行者123 更新时间：2023-11-28 08:38:20 25 4
gpt4 key购买 nike

谁能帮我优化一下这个CSS布局？
问题是:
-左边尺寸的页脚被上面的文字覆盖
- 为什么我看不到垂直滚动条？
- 右下角的文字消失在图片后面
- 右下角的文字没有到达底部
- 如何让右下框的字体大小与窗口成正比？

请帮忙!

此脚本中使用的图像 p1.jpg 可以在
中找到 https://www.dropbox.com/s/u9hzlj2vz6hk229/p1.jpg?dl=0 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style type="text/css">

.fixed_hdr_left {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 25 px;
  border: 1px solid red;
}
.fixed_hdr_right {
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  height: 25 px;
  border: 1px solid black;
}


.fixed_main_left {
  position: fixed;
  top: 25px;
  left: 0;
  width: 30%;
  height: 90%;
  border: 2px solid magenta;
}
.fixed_main_right {
  position: fixed;
  top: 25px;
  left: 30%;
  width: 100%;
  height: 50%;
  max-height: 80%;
  border: 2px solid yellow;
}
.fixed_main_low {
  position: fixed;
  font-size: 14;
  font-family: Arial;
  top: 60%;
  left: 30%;
  width: 100%;
  height: 4em;
  border: 2px solid green;
}

.fixed_footer_left {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  border: 2px solid blue;
}
.fixed_footer_right {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  border: 2px solid green;
}
body {
  margin-bottom: 120px;
}
</style>

<head>
<title>css layout test</title>
</head>
<body>

<div class="fixed_hdr_left"> CSS layout</div>
<div class="fixed_hdr_right"> using position; fixed;</div>
<div class="fixed_footer_left"> Copyright (c) 2015 by me and others</div>
<div class="fixed_footer_right"> Happy New Year!</div>
<div class="fixed_main_low"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. </div>
<div class="fixed_main_right"> <img src="images\p1.jpg" /> </div>
<div class="fixed_main_left">
<ul>
D E S I D E R A T A
<li>Go placidly amid the noise and haste, And remember what peace there may be in silence. As far as possible without surrender be on good terms with all persons.
<li>Speak your truth quietly & clearly; and listen to others, even the dull & ignorant; they too have their story.
<li>Avoid loud & aggressive persons, they are vexations to the spirit. If you compare yourself with others, you may become vain & bitter; for always there will be greater and lesser persons than yourself. Enjoy your achievements as well as your plans.
<li>Keep interested in your own career, however humble; it is a real possession in the changing future of time. Exercise caution in your business affairs; for the world is full of trickery. But let this not blind you to what virtue there is; many persons strive for high ideals; and everywhere life is full of heroism.
<li>Be yourself. Especially, do not feign affection. Neither be cynical about love; for in the face of all aridity & disenchantment it is perenniall as the grass.
<li>Take kindly the counsel of the years, gracefully surrendering the things of youth. Nurture strength of spirit to shield you in sudden misfortune. But do not distress yourself with imaginings. Many fears are born of fatigue & loneliness. Beyond wholesome discipline, be gentle with yourself.
<li>You are a child of the universe, no less than the trees & the stars; you have a right to be here. And whether or not it is clear to you, no doubt the universe is unfolding as it should.
<li>Therefore be at peace with God, whatever you conceive Him to be, and whatever your labours & aspirations, in the noisy confusion of life keep peace with your soul. With all its sham, drudgery & broken dreams, it is still a beautiful world.
<li>Be cheerful. Strive to be happy.
written in 1927 by Max Ehrmann (1872-1945)
</ul>
</div>


</body>
</html>

最佳答案

布局中的所有部分都使用“固定”定位是否有任何空间原因？
可以使用“相对”定位轻松创建所需的布局(这也将使布局响应)。其他选项包括使用像 pure.css 这样的 css 库。

我在这里创建了您需要的布局。

编辑分区的高度属性。(高度和颜色只是为了显示布局)

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
            <html>
            <head>
            <title></title>
               <style>
                  body{
                  text-align: center;
                  }

                  #topleft{
                    width: 69%;
                    height: 100px;
                    background-color: black; 
                    display: inline-block;
                  }

                  #topright{
                    width: 30%;
                    height: 100px;
                    background-color: red; 
                    display: inline-block;
                  }

                  #leftMiddle{
                    width: 30%;
                    height: 300px;
                    background-color: green; 
                    display: inline-block;
                  }

                  #rightMiddle{
                    width: 69%;
                    height: 300px;
                    background-color: white; 
                    display: inline-block;
                  }

                  #rm1{
                    width: 100%;
                    height: 150px;
                    background-color: yellow; 
                    display: inline-block;
                  }

                  #rm2{
                    width: 100%;
                    height: 150px;
                    background-color: orange; 
                    display: inline-block;
                  }

                  #footerLeft{
                    width: 80%;
                    height: 50px;
                    background-color: green; 
                    display: inline-block;
                  }

                  #footerRight{
                    width: 19%;
                    height: 50px;
                    background-color: gray; 
                    display: inline-block;
                  }

                  #footer{
                    position: fixed;
                    bottom: 0px;
                    left: 0px;
                    width: 100%;
                  }


               </style>
            </head>
            <body>

               <div id="topleft">
               </div>

               <div id="topright">
               </div>

               <div id="leftMiddle">
               </div>

               <div id="rightMiddle">
                 <div id="rm1">
                 </div>

                 <div id="rm2">
                 </div>
               </div>
               <div id="footer">
                   <div id="footerLeft">
                   </div>

                   <div id="footerRight">
                   </div>
               </div>

            </body>
            </html>

关于CSS 布局 : text overwriting footer, 文本隐藏在图像等后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27923463/

25 4 0
文章推荐： html - CSS 流体和固定列
文章推荐： javascript - Android - Webview Javascript 调用特定 DIV 类的函数
文章推荐： javascript - 碰到 Canvas x 边框时向后移动一个圆圈
文章推荐： javascript - 在选中时更改 td 的背景颜色
行者123
个人简介

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

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