标签: width

CSS 中有没有办法将任何元素的宽度设置为等于其父节点的宽度？我尝试过“继承” - 听起来很逻辑 - 但它不起作用。

提前致谢。

是否可以以某种方式设置 QGridLayout 列可以扩展到的最大宽度？
如果我为列内的小部件设置最大宽度，则即使达到小部件大小限制，该列也会继续增长。

我对 Qt 相当陌生，所以也许我错过了一些东西......在 WPF 中这是小菜一碟（通过设置 ColumnDefinition 对象的 MaxWidth 属性）。

我正在尝试为照片故事制作一个页面 - 它意味着水平滚动，但我也希望图像缩放到 100% 高度和自动宽度（因此无需裁剪）。水平滚动和100%高度/自动宽度没有问题。但我无法让图像保持适当的间距 - 它们不断重叠。请参阅： https: //i.stack.imgur.com/iAIXT.jpg

这可能吗？我已经在这方面工作了很多年了，但我已经没有什么想法了。

谢谢！

JS：

<script type="text/javascript" charset="utf-8">
    $(function(){
            $(".image").wrap("<td>");
    });
</script>   

CSS：

.image {
position:absolute;
width:auto;
height:100%;
}   

HTML：

<div id="page-wrap">
         <div class="image">
              <img src="images/Betty-001.jpg" id="image-contents" />  
         </div>

         <div class="image" style="margin-left:75%;">
               <img src="images/Betty-001.jpg" id="image-contents" />  
         </div>             
</div>

我试图让视图的宽度基于屏幕的宽度。根据 0 到 100 之间的值，宽度将是屏幕宽度的百分比。以下是我获取 DP 屏幕宽度的方法：

Display display = ((Activity)context).getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics ();
display.getMetrics(outMetrics);
float density  = context.getResources().getDisplayMetrics().density;
float screenWidthDP = outMetrics.widthPixels / density;

这会为我的设备返回 360dp，这是正确的。然后我用它来设置视图的宽度，其中 timeCountNewRange() 返回 0 - 100 之间的值：

int timeCountNewRange = getNewRangeTimeCount(timeCount, min, max);
int widthDP = (int) (((double)timeCountNewRange / 100.0) * screenWidthDP);

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(widthDP, 15);
params.setMargins(5, 0, 0, 0);
appHolder.timeBar.setLayoutParams(params);

由于某种原因，当“timeCountNewRange”值为 100 时，它仅占屏幕宽度的 60% 左右，其他所有内容也更短。如果更换

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(widthDP, 15);

和

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(360, 15); …

我想更改引导容器的默认宽度，即1170px.
可以覆盖这样的设置吗？

@media (min-width: 1200px) {
    .container {
        width: desired_width;
    }
}

这就是我真正要做的一切吗？

我正在制作照片轮播。目的是在一行上显示 x 张图片，其中 x 取决于视口大小。我所说的视口是指浏览器窗口内没有滚动条的区域。照片的大小调整为宽度 200 如果视口宽度为 2000 我可以获得 10 张照片 (200*10=2000) (我保持算术简单)

我的屏幕分辨率是 3840x2160。我扩大了浏览器以占据整个屏幕。当我使用： $(window).width() 时，我得到 1707，而 screen.width 则得到 1707。绝对不是 3840。

当我调整浏览器大小，使其占据大约一半的屏幕时，我得到： $(window).width() 为 929，screen.width 为 1706。

对于我使用 Edge、IE11、FF 和 Chrome 46 的浏览器，我遇到了大致相同的问题。

我的桌面显示器也是 4k，据我所知，它由两个 1920x1080 的面板组成，总共 3840x2160。如果这是真的，在我的笔记本电脑 4k 显示器上，如果我占据整个屏幕，我应该使用 screen.width 获得 1920 的宽度，但我没有。

我需要考虑到大多数浏览此网站的人都没有 4k 显示器。

关于如何获取 4k 显示器上的屏幕宽度有什么想法吗？

我正在尝试创建一个“事件”小部件，该小部件由排列在列中的两个文本小部件组成。事件小部件的宽度由第一个文本小部件（标题）确定。第二个文本（详细信息）应受标题宽度的限制并换行到下一行。这就是我想要的： https: //i.stack.imgur.com/0bbNr.png

我尝试过这种布局，但列的宽度设置为详细文本的宽度（最大的子项）

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Text("Title"),
    Text("Some longer text that should wrap")
  ]
)

我正在尝试构建一个全宽度DataTable，Flutter左侧有一个固定宽度的列，另外两列应该将剩余的列分开。

但是，即使左侧标题文本被截断，中间列和右侧列也不会占用剩余宽度，如下所示：

当文本太宽而无法在单行中显示时，我还想将文本换行到单元格中，但Wrap无法按预期工作。

我该如何解决我的问题？

这是代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(children: [
          Expanded(
            child: Container(
              constraints: BoxConstraints.expand(width: double.infinity),
              child: SingleChildScrollView(
                child: DataTable(
                    headingRowHeight: 32,
                    dataRowHeight: 24,
                    columns: [
                      DataColumn(
                        label: ConstrainedBox(
                          constraints: BoxConstraints(
                            maxWidth: 20,
                            minWidth: 20,
                          ),
                          child: Text('Short column'),
                        ),
                      ),
                      DataColumn(label: Text('Long column')),
                      DataColumn(label: Text('Long column')),
                    ],
                    rows: [
                      DataRow(
                        cells: [ …

我正在编写一个 C# 程序，并使用固定宽度的字体来显示所有内容。在这种字体下，每个 Unicode 字符要么占用 1 个字符宽度，要么占用 2 个字符宽度。程序中有一个功能，需要判断某个字符占用1个字符宽度还是2个字符宽度。首先我使用正则表达式[^\\x00-\\xFF]来解决问题。如果有字符匹配，则占用1个字符宽度，否则占用2个字符宽度。但后来我发现这是不正确的。例如，这些字符\xe2\x94\x8c\xe2\x94\x80\xe2\x94\xac\xe2\x94\x90\xe2\x94\x82\xe2\x94\x9c\xe2\x94\xbc\xe2\x94\xa4\xe2\x94\xb4\xe2\x94\x98不在 的范围内[^\\x00-\\xFF]，但它们都只占用 1 个字符宽度。我想知道在C#中如何确定使用定宽字体时特定字符占用1个字符宽度还是2个字符宽度？

我有兴趣查询浏览器中 DOM 元素可能增长到的最大大小。众所周知，空 DOM 元素（没有样式）的 .clientWidth 为 0，但添加文本/图像/等。元素可能会导致其宽度增加。thisOne以下面结构中的DOM 元素为例：

<table style="padding: 20px; border-spacing: 100px">
   <tr>
       <td></td>
       <td>
            <div id="thisOne"></div>
       </td>
   </tr>
</table>

目前#thisOne.clientWidth === 0，但如果我向其附加大量文本，它的宽度会不断增大，但直到它达到为止，document.body.clientWidth因为列、填充类等。我想知道如何计算出对象的当前最大宽度不做类似的事情：

const thisOne = document.getElementById('thisOne');
thisOne.style.visibility = 'hidden';  // do not display to user.
thisOne.innerHTML = 'blah '.repeat(2000);
const maxWidth = thisOne.clientWidth;
thisOne.innerHTML = '';
thisOne.style.visibility = 'visible';

基于 JQuery 的答案很好，但了解纯 HTML/JS 版本会更好。

（如果有人想知道，我计划将音乐符号的 SVG 放入 div 中，但我希望通过在添加之前为渲染器提供适合的宽度，使其能够很好地包裹到其他行上）