标签: width

如何使用“宽度自动”和“浮动”来对齐 div?

我想在页面左侧有一个容器(带有一些文本),它可以根据可用空间进行调整,右侧有 2 个侧边栏(我正在使用 Wordpress)。(2 个侧边栏与float.配合良好。)所以我尝试width:auto了容器。

但它不会适应剩余的可用空间(它占用所有页面宽度)。如果我将宽度设置为70%,它适合索引页上的空间,但如果我点击一篇文章,我只剩下 1 个侧边栏,所以文本和侧边栏之间有一个空白空间。

你知道如何解决这个问题吗?

#container { /* the text */
    overflow:auto;
    width:auto;
    position:relative;
    float:left;
}

#primary { /* first sidebar */
    position:relative;
    border:1px solid red;
    float:right;
    width:250px;
}


#second { /* second sidebar */
    border:1px solid red;
    background:white;
    width:250px;
    height:auto;
    float:right;
    margin-left:15px;
}
Run Code Online (Sandbox Code Playgroud)

谢谢


编辑 :

假设我正在使用它而不是 wordpress 侧边栏:我仍然无法使其工作,有人可以看看这个简单的代码吗?有两个盒子:绿色一个和红色一个...

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
        <body>

            <div style="position:relative; width:700px; margin:0 auto;">
                <div style="width:auto; border:1px …
Run Code Online (Sandbox Code Playgroud)

css width css-float

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

如何使用纯 CSS 增加宽度:自动 DIV 的宽度 X 像素

我有一个DIV(设置为float:left),它的宽度设置为auto因为我希望它和它的内容一样宽。

在悬停,我想增加宽度的的DIV的说,20个像素。

在:hover CSS 类中设置固定宽度时,容器将在悬停时获得该宽度,但是

  1. CSS3-Transitions 将不适用/工作(在 Firefox 15.0.1 中测试)
  2. 如果我的DIV的内容大于该固定宽度,则最终宽度将不正确。

如何 - 在不使用 javascript 的情况下 - 我可以将DIV的内容调整为其内容,并在悬停时将宽度增加一定数量的像素吗?

在这里查看我的 JSFiddle。

html css width transitions

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

无法设置动态创建的搜索栏的最小宽度

这是我用来生成视图对象的代码:

        // creates the seekBar
        sBGauge = new SeekBar(this);
        sBGauge.setMax(depthL - 1);
        sBGauge.setMinimumWidth(150);
        sBGauge.setId(2000 + i);
        sBGauge.setOnSeekBarChangeListener(this);
Run Code Online (Sandbox Code Playgroud)

我设置了 sBGauge.setMinimumWidth(); 它似乎总是只有大约 20 宽。

有什么想法吗?谢谢

编辑:为了提供更多信息,我在 tablerow 中的两个 textViews 之间使用此搜索栏。

撞

css android width seekbar

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

我已经为 div 设置了背景颜色,但是当我减小窗口大小时它消失了

该网页是站点链接。如果减小窗口大小,透明灰色background消失。我已经尝试了很多方法来解决这个问题,但没有成功。有任何想法吗?我使用的 CSS 是:

  #content {
    margin-bottom: 20px;
    padding-left: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    overflow:auto;
}
Run Code Online (Sandbox Code Playgroud)

css background width

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

R中条形图数组中的恒定条形宽度

我正在尝试制作一个(1 行,3 列)条形图数组,它们都具有相同的条形宽度。

所有三个条形图都有不同数量的观测值,因此每个图的条形宽度最终都不同(即,具有最多观测值的图形具有最窄的条形,而具有最少观测值的图形具有最宽的条形)。我从barplot {graphics} R文档中了解到,

“除非xlim指定,否则指定单个值将没有可见效果”

但是,我x labels是字符串,所以我不确定如何指定xlim. 我不介意我的图的宽度是否不同,但是我需要以某种方式指定它吗?

这是一些假数据和我正在使用的代码……谢谢你的帮助。

height4plot1 <- c(1,6,9,2,3,10,7,15)
names4plot1 <- c("P1","P2","P3","P4","P5","P6","P7","P8")

height4plot2 <- c(5,4,10,2)
names4plot2 <- c("M1","M2","M3","M4")

height4plot3 <- c(4,12)
names4plot3 <0 c("U1","U2")

par(mfrow=c(1,3),
    mar=c(10,5,2,1),
    cex.axis=0.7,
    mgp=c(3,0.5,0))
barplot(height4plot1,
    names.arg=names4plot1,
    las=3,
    axes=TRUE,
    axisnames=TRUE,
    ylab="YLAB",
    ylim=ylim,
    plot=TRUE,
    main="PLOT1",
    width=1)
barplot(height4plot2,
    names.arg=names4plot2,
    las=3,
    axes=TRUE,
    axisnames=TRUE,
    ylim=ylim,
    plot=TRUE,
    main="PLOT2",
    width=1)
barplot(height4plot3,
    names.arg=names4plot3,
    las=3,
    axes=TRUE,
    axisnames=TRUE,
    ylim=ylim,
    plot=TRUE,
    main="PLOT3",
    width=1)
Run Code Online (Sandbox Code Playgroud)

plot r width

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

获取JavaScript中加载的图像宽度

我在我的JavaScript代码中附加了一个图像,但想要获得正确的宽度和高度.这可能吗?我的代码看起来像这样:

$('body').append('<img src="path.jpg" width="'
        + w + '" height="' + h + '" alt="" />');
Run Code Online (Sandbox Code Playgroud)

我知道如何在加载后获得图像宽度,但我正在加载img并希望直接获得相应的宽度和高度.有小费吗?

javascript jquery height image width

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

Primefaces数据表列宽不起作用

我创建了一个包含一些测试数据的数据表.我的问题是,对于我的一个列,某些值太大,导致一个奇怪的布局:

在此输入图像描述

(在订单栏之后应显示另外两列)

我已经尝试了一些事情:

  • <p:column headerText="Orders" width="50"> 没有变化
  • <p:column headerText="Orders" style="max-width: 30px;"> 使列更稀疏,但值在30px后被切断
  • 在几个数字之后添加一个<br/>强制断裂线,但没有变化

订单值是一个大字符串.我的目标是将orders列更改为多行列,其中字符串值被拆分.

我的数据表代码:

<h:body>
    <h:head>
    </h:head>
    <h:form id="form">           
        <p:dataTable id="customerTable" var="customer" value="#{customerDataTable.allCustomer}"
         rows="25" paginator="true" emptyMessage="No customer found.">  

                <p:column headerText="Customer ID" style="text-align: center;">  
                <h:outputText value="#{customer.customerNumber}" /> 
                </p:column>

                <p:column headerText="Fist Name" style="text-align: center;">  
                <h:outputText value="#{customer.contactFirstName}" />  
                </p:column> 

                <p:column headerText="Last Name" style="text-align: center;">  
                <h:outputText value="#{customer.contactLastName}" />  
                </p:column> 

                <p:column headerText="Sales Employee Nr." style="text-align: center;">  
                <h:outputText value="#{customer.employee.employeeNumber}" />  
                </p:column> 

                <p:column headerText="Orders">  
                <h:outputText value="#{customer.allOrders}"/>
                </p:column> 


                <p:column headerText="Payments" style="text-align: center;" >
                    <p:commandButton id="payment_btn" …
Run Code Online (Sandbox Code Playgroud)

datatable width primefaces

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

C# 获取可滚动面板的总内部区域

对某人来说应该是一个很好的简单的...

我有一个面板,我正在向其中动态添加子控件,当它们中的任何一个放置在可见区域之外时,滚动条将出现。

我需要知道这个区域的总面积。即可滚动区域有多宽?

我可以获得最远放置的控件并使用其 left + width 属性,但必须有更简洁的方法吗?

编辑:希望这说明我需要什么(可滚动区域宽度)。 在此处输入图片说明

c# panel area width

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

HTML CSS 表格填充父元素中的空间

我在表中使用表。我希望子表填充父表单元格。这可能吗?

此外,表列是否有可能在不缩小其他列的情况下填充剩余空间(不像width='90%'这可能会迫使其他一些列被截断)?

html css formatting width css-tables

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

c3js 条宽不适应缩放

图表在正常情况下相当不错。但我希望它在缩放时调整条宽。没有缩放的图形如下。

在此处输入图片说明

当我放大图形时,条形宽度保持不变,非常细!

在此处输入图片说明

反正他们会自动调整吗?我看到一个链接,其中示例通过缩放调整条宽。但我看不出有什么遗漏。这是示例:http : //blog.trifork.com/2014/07/29/creating-charts-with-c3-js/

这是我的图表代码。我错过了一些设置吗?

var chart = c3.generate({
    bindto: '#chart',
    data: {
        xFormat: '%m/%d/%y %I:%M %p',
        json: final_data,
        keys: {
            x: 'date',
            value: values
        },
        type: 'bar',
        groups: val
    },
    bar: {
        width: { ratio: 0.9 }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%b %d'
            }
        }
    },
    zoom: {
        enabled: true
    },
    color: {
        pattern: colors
    }
});
Run Code Online (Sandbox Code Playgroud)

width timeserieschart c3.js

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