标签: width

我有一个表 2列每列800像素宽.我想在800x50窗口中显示此表.所以应该有水平和垂直滚动条来查看完整的表格.

虽然我在SO上找到了很少的相关解决方案(这个和这个),但它们只有在表格宽度小于屏幕尺寸时才有效.在我的情况下,屏幕大小为1200像素,总表格宽度为1600像素.

我怎么能这样做？我希望实现这样的目标.

编辑 哎呀,我忘了添加一个要求.抱歉.我希望用户滚动表时表的标题保持固定.

EDIT2

我已经尝试了下面提到的解决方案来包装div,但在这种情况下,垂直滚动条不显示.请用包装器div 查看此表.如果表格宽度大于屏幕尺寸,似乎只会出现此问题.我正在测试FF3.6.

EDIT3

当前表代码.即使我可以垂直滚动,也没有垂直滚动条.

<div style="overflow:scroll; width:800px;height:50px" >
<table style="width:1600px" border="1">
  <thead>
    <tr>
        <th style="width:800px">id_1</th>
        <th style="width:800px">id_1</th>
    </tr>
  </thead>
  <tbody style="">
    <tr><td>1200</td><td>1200</td></tr>
    <tr><td>1200</td><td>1200</td></tr>
    <tr><td>1200</td><td>1200</td></tr>
    <tr><td>1200</td><td>1200</td></tr>
    <tr><td>1200</td><td>1200</td></tr>
    <tr><td>1200</td><td>1200</td></tr>
  </tbody>
</table>
</div>

在这里尝试一些基本的jQuery和JavaScript.

该.width()给我一个整数值.该.css('min-width')给我一个值的结局px.因此我不能按原样做数学.推荐的工作是什么？

alert($('#<%=lstProcessName.ClientID%>').parent('.column4').width());
alert($('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width'));
alert($('#<%=lstProcessName.ClientID%>').parent('.column4').width() >= $('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width'));

if ($('#<%=lstProcessName.ClientID%>').parent('.column4').width() >= $('#<%=lstProcessName.ClientID%>').parent('.column4').css('min-width')) {
  ...
}

致力于重新设计客户的内部网.我无法修改现有的HTML,只提供覆盖样式表.

在HTML中是一个正文内容包装器 - 每次调整窗口大小时,它都会获得一个明确的宽度和高度设置为与窗口宽度和高度内联:

<div id="s4-workspace" style="height: 660px; width: 1331px;">

现在,一些页面在这个内容包装器中有一个大表(至少1600px宽),当窗口小于此时,表突破容器,留下所有背景和填充.所有其他元素都遵循包装器宽度,在向右滚动时创建一大堆负空间:

有没有办法覆盖内联宽度并允许容器div #s4-workspace伸展到其内容？我最好的猜测是设置width: auto !important;,但chrome和firefox仍然优先考虑内联样式.任何帮助表示赞赏.

TLDR版本:

当我调整父级的大小时:

说明:

在Android应用程序中,我有一个父布局,里面有多个相对布局.

<LinearLayout
    android:id="@+id/parent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

    <RelativeLayout
        android:id="@+id/child1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/transparent">

     </RelativeLayout>

    <RelativeLayout
        android:id="@+id/child2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/transparent">

     </RelativeLayout>
</LinearLayout>

这种布局的孩子们有一些文字和图片.我正在做的是以下内容:

当用户点击按钮时,我想折叠父线性布局(动画宽度直到它为0).我已经实现了这个功能:

public static void collapseHorizontally(final View v) {
    final int initialWidth = v.getMeasuredWidth();

    Animation a = new Animation()
    {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            if(interpolatedTime == 1){
                v.setVisibility(View.GONE);
            }else{
                v.getLayoutParams().width = initialWidth - (int)(initialWidth * interpolatedTime);
                v.requestLayout();
            }
        }

        @Override
        public boolean willChangeBounds() {
            return true;
        }
    };

    // 1dp/ms
    long speed …

我在设计主页时遇到问题。我有一个 div，我想根据 div 内的最大内容设置宽度。这里的代码

<div class="head">
    <div class="time"></div>
    <div class="logo"></div>
    <div class="menu">
        <ul>
            <li>Home</li>
            <li>Profile</li>
            <li>Gallery</li>
            <li>Location</li>
        </ul>
    </div>
</div>

和CSS：

.head{
    position:relative;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    margin: 0px auto;
}
.time{
    position:absolute;
    width:150px;
    height:50px;
    left:0px;
    top:10px;
}
.logo{
    position: absolute;
    left:0;
    top:0;
    margin:0px auto;
    width:450px;
    height: 200px;
    z-index: -1;
}
.menu{
    position: absolute;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    height: 25px;
    text-align: center;
    top: 210px;
}

使用width: -moz-max-content,width: -webkit-max-content;并且width: -o-max-content;在 chrome、opera …

我想精确控制MATLAB中绘制的线条的粗细.不只是0.5,1,2,3 ......点,但例如0.2mm.可能吗？

导出设置窗口中有自定义线比例和最小线宽框但不起作用.

示例代码:

hf = figure;
ha = axes;
ha.Units = 'centimeters';

t = linspace(0,2*pi);
hl = plot(t,sin(t),'Linewidth',0.1);
axis tight

saveas(hf,'test','pdf')

我正试图让两个并排的盒子占据屏幕的整个宽度.但是,当将宽度设置为50%时,每个盒子要扩展大约10px,宽度大于50%.我究竟做错了什么？

#sides {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: white;
}

#leftside {
    width: 50%;
    background-color: grey;
    padding: 20px;
    margin: 0px;
    position: relative;
}

#rightside {
    width: 50%;
    display: inline-table;
    background-color: #018DCA;
    float: left;
    padding: 20px;
    margin-left: 50%;
    position: relative;
}

...

<div id="sides">
 <div id="leftside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
  <br>
 </div>
 <div id="rightside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
  <br>
 </div>
</div>

当浏览到https://github.com/timotheecour/D_vs_nim或https://github.com/timotheecour/D_vs_nim/blob/master/README.md时，我希望显示的降价以自定义（更大）宽度显示。那可能吗？如果可能的话，宽度将取决于浏览器窗口的大小，例如width=max(browser_width, fixed_width)。

编辑：好奇https://github.com/github/markup中的 PR 是否有助于实现这一目标。

如何更改 Apexcharts 中项目栏的最大宽度/高度？（https://apexcharts.com/）

我有一个水平条形图，其数据是动态加载的，并且用户（项目）的数量各不相同。当用户很少或只有一个时，栏看起来非常大，我想将高度设置为最大 50px。

代码：

    var timeChart = {
            formatter: function (value) {
              var v = formatFromSeconds(value);
              return v;
            }
          };    
    var desv_time = function (value) {
      var v = formatFromSeconds(value);
      if (value>0)return "+"+v;
      else return v;
    }

    //CHART
    var chart1 = new ApexCharts( document.querySelector("#chart-desv"),
    {
      chart: {
          id: 'chart1',
          type: 'bar'
      },
      plotOptions: {
          bar: {
            horizontal: true,
          },
      },
      dataLabels: {
        enabled: true,
        formatter: desv_time,
        style: {
          colors: ["#000"]
        }
      },
      series: [],
      xaxis: {labels: …

这让我很头疼。也许我只是错过了一些愚蠢的事情，希望你们能提供帮助。

整个 html 元素的宽度约为移动设备屏幕的 80%。

在笔记本电脑上，减小屏幕尺寸并不能重现该问题。html 将按预期为全尺寸。

这是该应用程序的链接，您可以自己查看：https ://kaayo.vercel.app/

我尝试使用 android devtools 进行调试，结果如下：

最后，这是我的 chakraTheme.js：

global: {
      "html, body": {
        color: "gray.600",
        margin: "0",
        padding: "0",
        lineHeight: "tall",
        fontWeight: "400",
        backgroundColor: "bg.100",
      },
      body: { minHeight: "100vh" },
      "input:focus": {
        borderColor: "primary.200!important",
      },
      "a:hover": {
        textDecoration: "none",
      },
      ':focus:not(:focus-visible):not([role="dialog"]):not([role="menu"])': {
        boxShadow: "none !important",
      },
    },

如果您还需要什么，请告诉我。

感谢您的帮助！