标签: positioning

winforms位置和尺寸属性

我试图解开winforms的所有位置和维度属性,如果有一个全面的概述来解释它们之间的关系,那将非常有用.其中许多似乎在功能上等同,但我担心我可能会做出一些错误的假设.

作为参考,我指的是Screen.PrimaryScreen.Bounds和Form.DesktopBounds等属性; Form.ClientRectangle与Form.DisplayRectangle; Form.left vs Form.Location.X; PointToScreen与Cursor.Position等等.我也对多个显示器对位置属性的影响特别感兴趣.

如果有人知道一个注释图表,这将是全部,这将是很棒的.

.net positioning winforms

6
推荐指数
1
解决办法
1965
查看次数

为什么div会以相对/绝对定位崩溃?

我在使用浮动定位(例如使用overflow:hidden进行求解)时处理了div的内容崩溃,但我正在尝试学习绝对/相对定位,并且无法弄清楚为什么容器div会崩溃.我的测试用例:

<html>
  <head>
    <style type="text/css">
      body {
        background-color:#eee;
      }

      #content {
        margin:0 auto;
        position:relative;
        border:1px solid red;
        width:800px;
        display:block;
        background-color:white;
      }

      #header {
        border:1px solid black;
        background-color:#777;
        color:white;
        width:800px;
        position:absolute;
        left:0;
        top:0;
      }

      #leftcol {
        position:absolute;
        border:1px solid black;
        background-color:#ddd;
        width:200px;
        top:100px;
        left:0;
      }

      #rightcol {
        position:absolute;
        top:100px;
        left:205px;
        border:1px solid black;
        background-color:#ddd;
        width:500px;
      }

    </style>
    <title>CSS Positioning Example 1</title>
  </head>

  <body>
    <div id="content">

      <div id="header">
        <h1>The Awesome Website</h1>
      </div>

      <div id="leftcol">
        <h2>About</h2>
        <p>
        This website is so awesome because …
Run Code Online (Sandbox Code Playgroud)

css positioning css-position

6
推荐指数
1
解决办法
1万
查看次数

展开div以包含绝对定位的内容

我有一个div包含一堆绝对定位的控件.这些控件是动态生成的,我希望div扩展,以便它将覆盖宽度和高度的所有内容.我怎么能在CSS中这样做?

html css positioning css3

6
推荐指数
2
解决办法
5900
查看次数

缩放Chrome会导致CSS定位问题

当我在Google Chrome浏览器的网页上放大和缩小时,相对于彼此精确定位的项目将改变位置.这会导致许多问题:例如,在特定的缩放级别,div将与其包含的div重叠,足以隐藏边框.同样,有时100%标记不会与100%点精确对齐.

有什么方法可以确保当页面放大或缩小时,项目相对于彼此的定位不会改变?

css resize google-chrome positioning zooming

6
推荐指数
1
解决办法
2万
查看次数

CSS下拉导航导致html内容移动

关于SO的第一个问题,希望它能够解决,对于精通css艺术的人来说应该是一个简单的解决方案......

我遇到的问题是我的css驱动导航的下拉部分导致其下方的内容向右移动.我发现了类似的问题,但我已经尝试了所有提供的解决方案,似乎没有任何工作......

我设法得到的最接近的是添加position:absolute;#nav li:hover ul标签,这确实会阻止内容移动,但会产生新问题,只有当鼠标位于顶级菜单项上时才会显示下拉子菜单,并尝试将鼠标向下移动子菜单会导致它消失...我发现的另一个问题同样令人沮丧地解决...

导航的html是标准的嵌套列表:

<div id="navigation_panel" class="orange_grad">
    <!-- navigation-->
      <ul id="nav">
            <li><a href="#">about us</a>
                    <ul>
                            <li class="orange_grad"><a href="1">staff</a></li>
                            <li class="orange_grad"><a href="2">venue</a></li>
                            <li class="orange_grad"><a href="2">history</a></li>
                            <li class="orange_grad"><a href="2">community theatre</a></li>
                            <li class="orange_grad"><a href="2">rep theatre</a></li>
                            <li class="orange_grad"><a href="2">theatre school</a></li>
                            <li class="orange_grad"><a href="2">official partners</a></li>
                    </ul>
            </li>
            <li><a href="#">join us</a>
                    <ul>
                            <li class="orange_grad"><a href="1">friends membership</a></li>
                            <li class="orange_grad"><a href="2">wine club</a></li>
                    </ul>
            </li>
            <li><a href="#">hire</a>
                    <ul>
                            <li class="orange_grad"><a href="1">business</a></li>
                            <li class="orange_grad"><a href="2">rehersal space</a></li>
                            <li class="orange_grad"><a href="2">community groups</a></li>
                            <li class="orange_grad"><a href="2">theatre productions</a></li> …
Run Code Online (Sandbox Code Playgroud)

html css navigation positioning hover

6
推荐指数
1
解决办法
4万
查看次数

如何使用CSS float而不隐藏DIV的部分

当在DIV上使用CSS float时,其他未浮动的DIV继续占用浮动DIV的空间.虽然我确信这是故意的,但我不知道如何达到我想要的效果.请考虑这个例子:

<html>

<div style="width:400px">

<div style="width:150px;float:right;border:thin black solid">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

<div style="background-color:red;border:thin black solid">Some sample text</div>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex …
Run Code Online (Sandbox Code Playgroud)

html css layout positioning css-float

5
推荐指数
2
解决办法
3577
查看次数

安卓自定义地图

我正在为 Android 开发室内定位系统。我需要绘制建筑物的自定义平面图并在其上叠加一个指针。

在这种情况下,我应该使用哪个软件/API 来绘制自定义平面图?

提前致谢。

gis android positioning map

5
推荐指数
1
解决办法
2642
查看次数

仅具有绝对定位元素的 WYSIWYG HTML 编辑器

我读过很多关于在 HTML 中使用绝对定位的批评。尽管如此,我希望有一个简单的开放软件工具,它可以让我拥有一个快速的 HTML 页面原型,所有元素都通过拖放所见即所得机制具有绝对定位。通常,即使是 SVG 编辑器也可以完成,并且有很多好的编辑器,但是它们没有可以拖放的 HTML 表单组件,以便为具有表单的页面提供更逼真的 HTML 原型外观和感觉。如果原型在演示中是可以接受的,那么所有其他 HTML、CSS、Jquery 和其他编码都会从那里继续进行,绝对定位就位。生成的样式可以是内联的,也可以是单独的,这无关紧要。

所以,你会问我为什么不首先使用真正的 HTML 编辑器?嗯,问题是原型被接受后的步骤只需要元素的绝对定位,我审查的所有HTML编辑器都没有绝对定位的元素。我不想用什么以及为什么要求来混淆这个问题。
原型页面将由不太专业的 HTML 编码人员开发。只是一些基本的 HTML 元素,但肯定所有 Form 元素都是我需要的。

总结一下:

  1. 在 Windows 和 Linux 上可用的最好的免费 HTML 所见即所得编辑器是什么,它可以提供拖放界面,其中生成的底层 HTML 代码具有绝对定位元素。
  2. 在这个主题上,尽管这更像是一个事后分析的问题:HTML 中元素的绝对定位最大的缺点是什么(如果有的话)?

之前有人提出的问题:wysiwyg html editor build in html/javascript for position absolute elements也无济于事。

html wysiwyg positioning editor absolute

5
推荐指数
1
解决办法
1759
查看次数

如何在 pie chart.js 中创建图例位置?

我正在使用图表 js 来开发我的饼图。我想像这样创建图例位置。任何人请帮我解决这个问题...

在此处输入图片说明

这是我的代码......我实际上想要像图片一样的结果。当我在 html 中使用 css zoom:70% 并且使 javascript 不起作用时我收到错误..

<!DOCTYPE html>
<html>
<head>
	<title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<style type="text/css">
  body{ background-color: #1f1d1d; font-family: Roboto, Myriad Pro, Segoe UI;zoom:70%;}
  .col-sm-1.content { border: 2px solid #1f1d1d}
</style>
<body>
	  <div class="col-sm-1 content" style="background-color: #4f4f4f; height:377px;"><br><br><br>
        <canvas id="myChartBBC" style="width:375px; height: 375px;"></canvas>
      <br>
        <p style="text-align:center; color: #fff;font-size: 14px;"><i>Browse by Channel</i></p>
      </div>
</body>
<script>
  var ctx = document.getElementById('myChartBBC').getContext('2d');
  var chart = new Chart(ctx, {
      // The type of chart we want …
Run Code Online (Sandbox Code Playgroud)

javascript charts positioning legend pie-chart

5
推荐指数
1
解决办法
2万
查看次数

如何使用 jsPDF 在页面中央放置图像?

使用 html2canvas 和 jsPDF,我试图DIV在我的屏幕上打印一个完整的内容,我已经做到了这一点:

const printAsPdf = () => {
  html2canvas(pageElement.current, {
    useCORS: true,
    allowTaint: true,
    scrollY: -window.scrollY,
  }).then(canvas => {
    const image = canvas.toDataURL('image/jpeg', 1.0);
    const doc = new jsPDF('p', 'px', 'a4');
    const pageWidth = doc.internal.pageSize.getWidth();
    const pageHeight = doc.internal.pageSize.getHeight();

    const widthRatio = pageWidth / canvas.width;
    const heightRatio = pageHeight / canvas.height;
    const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;

    const canvasWidth = canvas.width * ratio;
    const canvasHeight = canvas.height * ratio;

    doc.addImage(image, 'JPEG', 0, …
Run Code Online (Sandbox Code Playgroud)

javascript math positioning html2canvas jspdf

5
推荐指数
1
解决办法
3209
查看次数