标签: width

我有一个页面的div元素由JavaScript对齐.JavaScript只检查一组div元素以找到max offsetWidth,然后将所有div元素的宽度设置为max offsetWidth.它在大多数浏览器和语言环境中都很完美,但在Mac上的Firefox中法语 - 法语失败了.在这种情况下,div的内容包装.

<div id="divFoo">
    Heure de d&#233;but :
</div>

对于上面的HTML,下面的代码报告"79".

javascript:alert(document.getElementById('divFoo').offsetWidth);

但在代码报告"79.1333px"下面.

javascript:alert(window.getComputedStyle(document.getElementById('divFoo'),null).width))

79.1333和79之间的差距使得不正确的宽度设置为内联样式.

我以前认为offsetWidth和width应该总是整数.有没有办法让offsetWidth正确圆？

我想创建一个像fieldset和的效果label.

当标题沿侧面变化时,标题的白色背景保持相同的宽度.

如果我可以使heading或div元素的宽度足以适合其内容,它将产生适当的效果.

如果有任何其他解决方案,请告诉我.

我有一个父容器,它包含一个浮动项目列表.添加新的浮动项目时,父容器可以很好地向右扩展.

但是当我添加更多项目并且项目靠近窗口右侧时,新项目才会跳转到新行.相反,我希望它继续向右扩展,使我的父容器大于100%.

是否可以将容器宽度定义为max-width:infinite;？

要回答我自己的问题,我知道我可以制作最大宽度为5000%的东西,但我只是想知道是否有更好的解决方案.我认为页面的高度是最大宽度有点奇怪:无限; 并且页面的宽度不能具有相同的行为.

也许这只是一个愚蠢的问题,但无论如何我都会问:P.

我在自己的网站上遇到了一个<div>应该有100%宽度的问题.它的代码如下所示.

#myDiv {
    width: 100%;
    height: 160px;
    background: #f48;
}

除以下问题外,这项工作很有用:

当我的浏览器窗口小于其<div>内容时,我向右滚动,然后我<div>将向左移动页面的其余部分,而不是占用页面可滚动区域宽度的100%.

这个问题一直困扰着我几个小时,就在最近我意识到许多其他网站都有同样的问题.包括Facebook.com和Stackoverflow.com,只需看看我的快照如下.

Facebook的错误:

Stackoverflow的错误:

我在下面编码样式:

table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:14px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
        width: 400px;
}

我在Firebug中看不到任何重叠.然而,表宽度计算为812 px;

为什么？

实际页面在这里(俄语):http://garmonia-znakomstva.ru/service.html

UPDATE

我可以添加不可见的单词分隔符,如果空间不足会导致单词断开和连字符,如果有足够的空间则会连续单词？

我有一个水平父列表.单击时,某些列表项会显示嵌套的垂直列表.如何强制垂直子列表中的项目与父列表项目的宽度相同？

见jsFiddle.

HTML:

<ul class="mainMenu horizontalMenu bulletless fullWidth bold">
    <li class="showSubMenu">
        <div>Resumes &amp; Cover Letters &#x25BE; </div>
        <ul class="mainSubMenu bulletless">
            <li><a>Resumes</a></li>
            <li><a>Cover Letters</a></li>
            <li><a>Interviews</a></li>
        </ul>
    </li><li><a>Other Link</a>
    </li><li><a>Other Link</a></li>
 </ul>?

CSS:

.horizontalMenu li{    
    display: inline-block;
}
.mainMenu > li{
    border: 1px solid black;
}
.mainMenu a, .mainMenu div{
    display: block;
    padding: 10px 20px;

}
.mainSubMenu{
    position: absolute;
}

我正在尝试向textview添加一个文本,我已将其宽度设置为Wrap_content.我试图获得此textview的宽度.但它在所有情况下都显示为0.在将文本设置到文本视图后,如何获得textview的宽度.

代码如下:

        LinearLayout ll= new LinearLayout(this);
        ll.setOrientation(LinearLayout.VERTICAL);
        TextView tv = new TextView(this);
        tv.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
        ll.addView(tv);
        tv.setText("Hello 1234567890-0987654321qwertyuio787888888888888888888888888888888888888888888888888");
        System.out.println("The width is == "+tv.getWidth());// result is 0
        this.setContentView(ll);

请建议.提前致谢.

我的最终目标是让jqgrid根据数据内容自动设置列宽.作为前往那里的路径的一部分,我需要能够在加载数据之后设置列宽,这时我知道每列的最大宽度.但是,一旦我知道列的最大宽度,我如何在"loadComplete"事件中设置每列的宽度并使用每列的新宽度刷新网格？我在网上找到的大多数帖子都是关于网格的整体宽度.我想要的是设置每个列的宽度,如果总宽度太长,则自动显示水平滚动条.

更新:在看到Oleg的精彩演示之后,我最终在dqGrid(4.5.4)中对此进行了编码.这是我做的:

找到该功能

addJSONData = function(data,t, rcnt, more, adjust) {

然后找到这个功能

            for (j=0;j<rowReader.length;j++) {
                v = $.jgrid.getAccessor(cur,rowReader[j]);
                rd[ts.p.colModel[j+gi+si+ni].name] = v;
                rowData.push(addCell(idr, v, j + gi + si + ni, i + rcnt, cur, rd));

                // my addtion: stores the largest header size
                var newWidth = v.length * 6; 
                if (ts.grid.headers[j].width < newWidth) {
                    ts.grid.headers[j].width = newWidth;
                }
            }

然后在此函数结束之前,添加以下内容

        // my addition: invoke the resizing logic
        for (j = 0; j < rowReader.length; j++) {
            ts.grid.resizing = { idx: …

我正在使用一种方法在css中使用视口测量来定义我的width属性,css代码:

#content {
    position: absolute;
    background-color: white;
    width: 100vw;
    top: 115px;
    bottom: 30px;
    display: table;
    z-index: 0;
}

当我从宽度改变宽度:100vw; 宽度:100%; 我的代码不再工作了.我想更改为百分比测量,因为我发现viewport不适用于Android <4.4

其他相关的HTML和CSS代码:

HTML

  <div id="mainslide"> 
    <section id="aanbod"> 
      <div id="content" align="center">
        <table class="tablestyleorchideeaanbod">
          <tr>
            <td class="titel" width="85%">Orchidee</td>
            <td class="beschrijving" width="15%" rowspan="1" align="right">21 aug</td>
          </tr>
          <tr>
            <td class="soort">Cherry red</td>
            <td width="15%" rowspan="2" align="right"><svg height="30" width="30">
              <circle cx="15" cy="15" r="12" fill="#ff4641" />
              </svg></td>
          </tr>
          <tr>
            <td class="beschrijving"><span class="width">Aantal: 100 stuks</span>Grootte: 3 Liter</td>
          </tr>
        </table>
      </div>
    </section>

    <section>
    ..............
    </section>

    <section>
    ..............
    </section> …

react-native Dimensions.get("window").宽度为iPhone 6s返回375 ....它似乎远非正确.

`

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions
} from 'react-native';



class AwesomeProject extends Component {

  render() {
    return <Text style={{margin:50}}>Width: {Dimensions.get("window").width}</Text>;
  }
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);`