gpt4 book ai didi

html - 应用于 div 的 css 宽度不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 10:15:07 25 4
gpt4 key购买 nike

我有一个 divwidget 并且我将 widthlength 样式应用于我的小部件类,但出于某种原因,宽度仍然是屏幕的 100% 而不是我在下面定义的 200px。有人可以帮忙吗?

这是一个 fiddle :

https://jsfiddle.net/ps17t1a5/

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}


.widget {

display: table-cell;
text-align: center;
vertical-align: middle;
margin: 0;
width: 500px;
height: 200px;
padding: 7px;

}

<body ng-controller="main_controller">
<div class="widget">
<h1>{[city]}, {[state]}</h1>
<div>
<h1 style="float: left">{[current_temp | degree]}</h1> <h1 style="float: right">afasf</h1>
</div>
<p>{[today_day]}</p>
<p>{[today_high | degree]} / {[today_low | degree]}</p>
</div>
</body>

最佳答案

table 内的

Cells 的总和应为 table 维度的 100%。您已将表格设置为具有 width: 100%height: 100%body 元素 - 您的 .widget 是唯一的 cell,因此可以利用整个空间。只需删除 display:tabledisplay:table-cell 规则,维度规则就可以正常工作:

https://jsfiddle.net/ilpo/ps17t1a5/3/

我不知道您为什么首先要使用 display:table-cell,但我认为它是为了垂直和水平居中。如果是这种情况,请改用它:

position: absolute; //or relative or fixed depending on your needs
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

关于html - 应用于 div 的 css 宽度不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37310582/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com