标签: width

pxCSS width和height属性接受的最大有效值是多少？

(我目前正在构建一个创建一个非常大的可缩放容器元素的webapp,我想知道实际的限制是什么.)

我有一些div,当页面准备就绪时设置为绝对位置(CSS),并相对于另一个固定的div定位,哪个工作正常.但是,在加载页面并设置所有内容之前,如果页面调整大小,那些绝对div不会跟随更改,移动到其他位置,我认为它们相对于屏幕的顶部和左侧给出了值.

我用作起点的相对div的位置来定位绝对的位置也可以相对于它上面的位置改变位置.

有没有办法监听浏览器的宽度/高度的变化,以使这些div保持在正确的位置.

提前致谢!

我在页面上有两个div.一个网格容器,它采用背景和内部网格,需要定位在另一个网格的中心.我的css:

html, body{ 
  margin:0;
  padding:0;
  width:100%;
}
#grid-container{
  background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
  width:100%;
}
#grid{
  width:1140px;
  margin:0px auto;
}

此时,#grid-container的bg图像只填充窗口,而不是html的全宽.这种情况的症状是,如果您缩小浏览器窗口以便需要水平滚动条并刷新页面,则bg图像将在浏览器窗口结束的位置结束.当我向右滚动时,bg图像不在那里.想法？

编辑:好的,根据请求,我编辑了我的css/html.当我删除#grid-container中的宽度指定时,它会缩小到容器内的宽度,这更糟糕.这就是我现在拥有的:

html, body{ 
  margin:0;
  padding:0;
  min-width:1140px;
}
body{
    background:url(../images/page-background.jpg) repeat-x top left !important; 
    height:100%;
}
#grid-container{
  background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
  padding-top:1px;
}
#grid-container2{
  width:1140px;
  margin:0px auto;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: …

我在容器中有2列(内联块)(100%宽度).

1. 左侧列必须具有最小宽度,例如200px,宽度:25%.

2. 右侧柱宽:75%

   <style>
   .outer {
       width: 100%;
       border: 1px solid black;
   }
   .left, .right {
       display:inline-block;
   }
   .left {
       min-width: 200px;
       width: 25%;
       background-color: #dcc2c2;
   }
   .right {
       width: 75%;
       background-color: #d0dee8;
   }
   </style>
   
       <div class="outer">
           <div class="left">left</div>
           <div class="right">right</div>
       </div>
   

   Run Code Online (Sandbox Code Playgroud)

在调整大小时达到最小宽度之前,列并排放置,这是我想要的,但是一旦最小宽度开始,右列就会落在下一行.

如何使正确的列缩小但不会落在下一行？

链接到JSFiddle

如何使用CSS减少Arial类字体的字符宽度？

我在jQuery UI网站上使用这个jQuery UI组合框自动完成控件开箱即用:

我的问题是我在页面上有多个组合框,我希望它们每个都有不同的宽度.

我可以通过添加这个CSS来改变所有这些的宽度:

 .ui-autocomplete-input
 {
     width: 300px;
 }

但我无法找到改变其中一个宽度的方法.

我正在使用svg创建股票图表,当我将路径元素的笔触宽度设置为1时,我遇到了问题.而不是使线条更窄,它只是使它与笔划宽度相同:2但略透明.我不能发布它的图像,因为我没有足够的声誉点...

我的svg标签看起来像这样:

<div style="height:300px; width:400px; overflow:hidden">
<svg style="position:relative" height="10000" width="10000" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>

我正在使用javascript/jquery动态添加路径元素:

var shape = document.createElementNS("http://www.w3.org/2000/svg", "path");
$(shape).attr({"d":"...",
               "fill":"none",
               "stroke":color,
               "stroke-width":"1"});
$("svg").append(shape);

我省略了路径d属性的值,因为它有点长.此外,color是一个字符串变量,它在前面确定为"绿色","红色"或"黑色".

我的代码中是否存在导致此问题的错误或是否是另一个问题？

如果我制作<h1>标题,默认情况下其宽度设置为100%.有没有办法确保其宽度设置为可能的最小值？我需要这个用边框做特殊的CSS东西.

<td>当条目太长时,如何限制表条目在整个屏幕上展开？

我有两个内容边框,第二个边框宽度根据内容而变化,我正在尝试将第一个边框绑定到第二个边框宽度,但它不起作用,我不确定我缺少什么.有人可以给我一些方向吗？以下是我目前正在尝试的一个例子.

<Border x:Name="border1" Width="{Binding Path=Width, ElementName=border2}">
    ... 
</Border>

<Border x:Name="border2">
    ...
</Border>