图像宽度百分比 [ CSS ]

Posted 2023-03-06

【中文标题】图像宽度百分比 [ CSS ]

【英文标题】：Image Width Percentage [ CSS ]

【发布时间】：2018-01-06 12:53:34

【问题描述】：

我在我的 asp.net 页面上使用了引导程序。但不幸的是，我在宽度属性中使用百分比时遇到了问题。当我使用像素时，它可以工作，但是当我使用百分比时，它将不起作用。请看下图。

【问题讨论】：

请尝试提供一些代码...？

为什么需要使用 % ？如果没有什么特别的，就用像素

尝试 100% 或 200% 看看是否还能正常工作

【参考方案1】：

原始代码

<div class="big-box">

    <div class="member-info">

        <img src="img/team/store.png"  class="img-circle" />
        <span class="member-name"><%# Eval("cust_name") %></span>
        <div class="member-role red pull-right">

            <div class="progress">
               <div style="width: 40%;" class="progress-bar progress-bar-striped progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" ></div>     

            </div>
        </div>

    </div>

移除 PULL-RIGHT（感谢 @hunzaboy）

<div class="big-box">

    <div class="member-info">

        <img src="img/team/store.png"  class="img-circle" />
        <span class="member-name"><%# Eval("cust_name") %></span>
        <div class="member-role red">

            <div class="progress">
               <div style="width: 40%;" class="progress-bar progress-bar-striped progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" ></div>     

            </div>
        </div>

    </div>

感谢大家的帮助。非常欣赏。 :)

【参考方案2】：

从member-role 元素中删除pull-right 类并尝试使用列来对齐项目。

【参考方案3】：

百分比是使用父元素的大小计算的。我猜你的元素嵌套的 div 没有任何设置的宽度。

【讨论】：

这应该是评论