DIV宽度设置为百分比（如50%），如何使DIV的高度等于宽度

Posted 2023-04-23

DIV宽度设置为百分比（如50%），如何使DIV的高度等于宽度，你先前给我的答案可以实现单个DIV，我现在需要多个DIV，程序自动生成的N个DIV（商品列表），因为DIV不能是相同的ID（同ID无效，只有第一个有效）。能用CLASS吗？如何实现多个DIV同时有效？谢谢！

你给每一个DIV加一个class就行了，比如说，class="DIV"，那你这样：
<script>
doSomeThing('DIV');
function doSomeThing(myClassName)
var aDiv=document.getElementsByTagName('div');
for(var i=0;i<aDiv.length;i++)

if(aDiv[i].className==myClassName)
aDiv[i].style.height=aDiv[i].offsetWidth+'px';



</script>
如果要class="TestDiv"，那就把：
doSomeThing('DIV');
改成：
doSomeThing('TestDiv');
其它的地方不用改。
大概就是这样了。来自：求助得到的回答 参考技术A 这个只用CSS应该是不能实现的，应该用javascript才好。
用JS获取一下DIV的宽度，之后再设置高度。

参考如下：
<script>
var divOne=document.getElementById('divOne');
divOne.style.height=divOne.offsetWidth+'px';
</script> 参考技术B 用jquery来写，每个DIV写相同的class比如class='mydiv'
var height = $(".mydiv").width();
$(".mycdiv").css("height",height );

如何将表格样式设置为容器的全宽并使单元格使用宽度的百分比？

【中文标题】如何将表格样式设置为容器的全宽并使单元格使用宽度的百分比？

【英文标题】：How can I style table to be full width of container and make the cells use percentage of the width?

【发布时间】：2011-06-02 15:12:13

【问题描述】：

这是我的html。下表位于一个固定宽度为 670 像素的容器 div 中。现在我不知道如何继续让这个表捕获容器的整个宽度。

<table class="table_fields">
    <tr class="table_fields_top">
        <td><?php _e('Published','news'); ?></td>
        <td><?php _e('Story','news'); ?></td>
        <td><?php _e('Views','news'); ?></td>
        <td><?php _e('Comments','news'); ?></td>
        <td><?php _e('Rating','news'); ?></td>
    </tr>
</table>

这是我的 CSS：

.table_fields 
    display: block;
    background: #fff;
    border: 1px solid #dce1e9;
    border-bottom: 0;
    border-spacing: 0;


.table_fields .table_fields_top background: #f1f3f6;
.table_fields .table_fields_top td
    font-size: 10px;
    text-transform: uppercase;


.table_fields td 
    text-align: center;
    border-bottom: 1px solid #dce1e9;
    border-right: 1px solid #dce1e9;
    font-size: 11px;
    line-height: 16px;
    color: #666;
    white-space:nowrap;

我尝试设置宽度：100%；但它返回了空格，但 TD 不平衡。我不知道如何使 TD 始终占满 100% 的空间。我尝试为每个 TD 设置 width: 20%，因为它们是 5 tds 以获得 100% 的宽度。但这没有用。有人可以告诉我如何使单元格适合 100% 的表格的 FUll 宽度（假设每个 TD 都有固定的宽度百分比，例如 20%）。

【参考方案1】：

我认为您的问题是您有display: block 覆盖了表格的默认显示模式（即table）。删除它，然后尝试将width: 100% 应用于表格。

【讨论】：

Bootstrap 可以代替 width: 100% 样式（即 class="col-xs-12"）

我不同意上述观点，因为保持显示不变就可以了，但是当使用 table width:100% 时，您还应该像这个 table 一样包含 tr、tbody、thead ,thead,tbody,tr width:100% 再次完美运行