css - 在 XHTML 页面上定位对象-6ren

css - 在 XHTML 页面上定位对象

转载作者：太空宇宙更新时间：2023-11-04 05:22:15

24

4

我正在为 Web 应用程序创建 Web 用户界面。该界面有页眉、页脚和水平线中的两个矩形之间。矩形由空格分隔。所有这些功能都是使用标签创建的。下面给出了 CSS 来格式化左边的矩形:

#sidebar1 {    
    position: absolute; 
    left: 150px;
    width: 450px;          
    height:250px;
    background: #EBEBEB; 
    padding: 20px 0; 
        padding-left:20px;
        padding-right:20px;
    margin: 50px auto;
        border: 1px solid #000000;

}

问题是，当您挤压或扩展浏览器窗口时，这些矩形会改变位置或相互重叠。这是 Not Acceptable 。我在 CSS 中尝试了 position 关键字的其他选项，例如 position: fixed 或 position:relative 或 static 但表示仍然是错误的。同样，我尝试了 float:left 和 float: right 但这仍然使矩形移动和重叠。尽管您正在扩展或挤压窗口，但我希望这些矩形静止不动。请问你的解决方法是什么？最好的问候 enter image description here

当前代码:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Welcome to Spring Web MVC project</title>
    <style type="text/css"> 


body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;   
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    /*padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: black;
} 

 #header { 
    background: green;         
      /*  top: 100px; */
        text-align: center;
    margin: 55px;        
    padding: 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 


#sidebar1 {    
    position: absolute;         
        left: 150px;
    width: 450px; /* since this element is floated, a width must be given */
    height:250px;
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 20px 0; /* top and bottom padding create visual space within this div */
        padding-left:20px;
        padding-right:20px;
    margin: 50px auto;
        border: 1px solid #000000;

}
 #sidebar2 {
    position: absolute;        
        right: 150px;
    width: 450px; /* since this element is floated, a width must be given */
    height: 250px;
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 20px 0; /* top and bottom padding create visual space within this div */
        padding-left:20px;
        padding-right:20px;
    margin: 50px auto;
        border: 1px solid #000000;

}




 #footer { 
    padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:green;
        width:95%;
        margin:55px;
        position: relative;
        bottom: -300px;;

} 

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0px;
    font-size: 1px;
    line-height: 0px;
}


</style><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.thrColHybHdr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
.thrColHybHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body>
<div id="header">
    <h1>Header</h1>
  <!-- end #header --></div>
<!--<div id="container"> -->

 <div id="sidebar1">
    <h3>blah blah</h3>
    <p><li>blah blah</li> </p>
    <p><li>blah blah</li> </p>
    <p><li>blah blah</li></p>
  <!-- end #sidebar1 --></div> 

 <div id="sidebar2">
    <h3>blah blah</h3>
    <p><li>blah blah</li> </p>
    <p><li>blah blah </li></p>
    <p><li>blah blah</li></p>
  <!-- end #sidebar2 --></div>
  <p>
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
  </p>


  <p><br class="clearfloat" />
  </p>
  <div id="footer">
    <p>Footer</p>
    <p>Terms & Conditions</p>

  <!-- end #footer --></div>
<!-- end #container --> <!--</div> -->
</body>
</html>

最佳答案

没有理由在这里对任何东西进行绝对定位……这只会让人头疼。一般来说，只有在绝对必要时才做绝对定位，这对我来说几乎完全是当我必须让某物漂浮在其他东西之上时。否则，一切都与其他事物相关，这是默认的。

这里有一个简单的策略来实现这一点:

<div class="pagecontainer">
     <div class="header">
       Header Goes Here
     </div>

     <div class="bodycontainer">
        <div class="floatleft">Leftbox</div>
        <div class="floatleft">Rightbox</div>
        <div class="clear"></div>
     </div>

     <div class="footer">
       Footer Goes Here
     </div>
</div>

样式如下:

.floatleft {
   float: left;
   otherstyle: here;
   margin: 5px;
}

.clear {
   clear:both;
}

是的，这是抽象的，因此您必须根据您的特定目的对其进行自定义。

避免重叠的关键是确保 body 容器内的 div 永远不会超过 bodycontainer 父元素的大小(不要忘记边距，在某些情况下填充(愚蠢的 IE)计入该值)并且两者之后向左漂浮并带有清晰的漂浮物。

如果你想让它变得简单得吓人，可以使用像 960.gs 这样的网格。

关于css - 在 XHTML 页面上定位对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6295643/

24

4

0

文章推荐： php - 无法在php中写入txt文件

文章推荐： c - 是什么限制了 c 中嵌套循环的数量？

文章推荐： python - Airflow 不会触发带有 `LocalExecutor` 的并发 DAG

jQuery追加()定位
我必须从我的网站中删除()一些iem，然后将它们追加()回来，但是当我追加它们时，它们出现在不同的地方，而我希望它们完全显示在它们以前的同一个地方是。有什么解决办法吗？这是一个沙箱，请随意更新(注
CSS - 定位
一个。图片 (960x7)b. div(宽度:960，填充:10) 我想定位 (a)，使其距顶部 50 像素，居中。我想将 (b) 放置在 (a) 的正下方，没有空格。我的 CSS 如下: @cha
CSS 定位
放置某物的正确方法是什么？我有一个在中心显示博客文章的 div。 "" rel="bookmark"> BY LOUIS MOORE ON " pubdate>
CSS 定位
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭1
CSS 定位
我已经成功地使用了 position:fixed 设置 CSS/CSS3 并且工作得很好! 我几天前看到了这个，想知道他们是如何实现向下滚动时发生的效果的，菜单栏在滚动前处于一个位置，然后转到顶部并自
CSS:定位
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 7 年前。 Improv
slate源码解析（三）-定位
接口定义能够对于文字、段落乃至任何元素的精准定位并做出增删改查，都是在开发一款富文本编辑器时一项最基本也是最重要的功能之一。让我们先来看看Slate中对于如何在文档树中定位元素是怎么定义的
WPF tabitem 定位
例如，使用 WPF 在选项卡控件的最左上角定位三个 tabitem 和在最右上角定位一个 tabitem 的正确方法是什么？我尝试通过更改边距将第四个 tabitem 向右移动，但这并没有产生好的结
javascript - 眼睛跟随光标 - 定位？
我正在尝试使用 Javascript 创建一个跟随鼠标在页面上移动的东西。我希望它是米老鼠，我希望他的眼睛跟随鼠标移动他的眼球...这是我到目前为止的代码(从网络上的各个地方收集，因此归功于编写该部分
arduino - 射频三角测量(定位)
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 9 年前。 Improve
Java GUI - 定位
我试图将两个按钮放置在左上角。但它们始终位于顶部中心。我已经尝试过这个: jp = new JPanel(); jp.setLayout(new GridBagLayout()); GridBagC
jQuery Slide Down 定位
我在使用 JQuery 向下滑动功能时遇到问题。我可以让它正常工作，但是我向下滑动的元素的位置会根据视口(viewport)的大小而变化。我想做的是将它与它滑动的元素联系起来。 This JSfidd
javascript游戏 Sprite 定位
我正在尝试创建一个棋盘，并将其放置在屏幕中间，但到目前为止我无法将它直接放在中间。我不想将位置硬编码到屏幕上，因为我要处理不同的屏幕尺寸。 var winsize = cc.director.
mysql - 定位、子串查询
我正在尝试从 mysql 中的 2 个字符串点之间提取数据，我的示例脚本是 'otherdata&p1=textneeded&otherdata' 我需要拉出“textneeded”位，“P1=”是起
按钮的 JavaFX 定位
如何在 JavaFX 中设置按钮的位置？我的代码: bZero = new Button(); bZero.setPrefSize(45, 20); mainPane.getChildren().ad
iphone - 定位 UIScrollView
我有一个 iPhone 应用程序，我可以在其中显示一系列图像。当用户点击图像时，我需要将该图像带到第一个位置，表明它是所选图像。我可以通过子类化实现 uiscrollview 中的点击。但是我无法将
使用导航栏的 CSS 定位
在下图中，它显示了一个image、textbox 和一个css menu image 我的 CSS 菜单非常完美。我终于按照我需要的方式得到了它。我的问题是我需要导航栏中央的文本框，然后我需要我的图像
html - CSS 定位
我必须创建一个看起来像这样的 div id为2的div应该出现在图片的右下角，图片的大小不固定id=2的div应该应用什么css id =1 的 div 没有定义位置，所以使用默认值，图像也是
文本和图像在同一行的 CSS 定位
如何将我的文本和图像对齐在同一行？每当我使用 padding 或 margins 时，它就会崩溃到我正在使用的圆形图像中。 #alignPhoto { padding-right: 50px;
使用页面引用的 CSS 定位
简单的问题，如何定位具有整个页面引用的元素？在我的例子中，我在标题中得到了一个 float 图像，然后是 2 组标题。当我使用时: text-align: center; 它使用图像宽度端和页面其余

首页

博学

6Ren·AI

商城

css - 在 XHTML 页面上定位对象