首页 新闻 会员 周边 捐助

div自适应宽度,水平居中

0
悬赏园豆:60 [待解决问题]

最开始的样子是这样的,但是屏幕缩放比发生了变化,这块div就变形了。
如何解决

Psyduckkk的主页 Psyduckkk | 初学一级 | 园豆:6
提问于:2022-02-23 09:30
< >
分享
所有回答(2)
0

左右两个div用flex布局,然后把里面表格的竖行绑定百分比宽度就好了
比如左边表格每一行外层
{
display: flex;
justify-content: space-around;
}
内部数据
{
width: 30%;
}

文动我心 | 园豆:311 (菜鸟二级) | 2022-02-23 09:42

这是我的div代码
页面代码:
<div class="w33">
<div class="pr8 hrow">
<div title="验收管理" class="easyui-panel" fit="true" tools="#tool_ysgl" height="100">
<div class="aa"><%@ include file="ysgl.jsp" %></div>
</div>
<div id="tool_ysgl">
<div class="more"><b>更多</b></div>
</div>
</div>
</div>
内容代码:
<div >
<div style="padding-left:25px;padding-top:55px;font-weight:bold;font-size:100% ">1</div>
<div style="padding-left:25px;padding-top:20px;font-weight:bold;font-size:100% ">2</div>
<div style="padding-left:25px;padding-top:20px;font-weight:bold;font-size:100% ">3</div>
<div style="padding-left:25px;padding-top:20px;font-weight:bold;font-size:100% ">4</div>
<div style="padding-left:25px;padding-top:20px;font-weight:bold;font-size:100% ">5</div>
<div style="width:80px;margin-left:90px;margin-top:-220px;font-weight:bold;font-size:100% ">项目名称</div>
<div style="width:80px;margin-left:210px;margin-top:-19px;font-weight:bold;font-size:100% ">验收状态</div>
<div style="width:80px;margin-left:322px;margin-top:-19px;font-weight:bold;font-size:100% ">验收阶段</div>
<div style="width:370px;height:20px ;color: #008080;margin-left:60px;margin-top:25px;font-weight:bold;font-size:100%;border-bottom: 1px solid;">        项目1                     已验收                第一阶段</div>
<div style="width:370px;height:20px ;color: #008080;margin-left:60px;margin-top:20px;font-weight:bold;font-size:100%;border-bottom: 1px solid;">        项目2                     已验收                第二阶段</div>
<div style="width:370px;height:20px ;color: #008080;margin-left:60px;margin-top:20px;font-weight:bold;font-size:100%;border-bottom: 1px solid;">        项目3                     未验收                     /</div>
<div style="width:370px;height:20px ;color: #008080;margin-left:60px;margin-top:20px;font-weight:bold;font-size:100%;border-bottom: 1px solid;">        项目4                     已验收                第三阶段</div>
<div style="width:370px;height:20px ;color: #008080;margin-left:60px;margin-top:20px;font-weight:bold;font-size:100%;border-bottom: 1px solid;">        项目5                     试运行                    /</div>

</div>

具体应该加在哪里呢?

支持(0) 反对(0) Psyduckkk | 园豆:6 (初学一级) | 2022-02-23 09:49

@Psyduckkk: 你写的太乱了,还有写样式不是全部用内联样式去搞定的!
你右边的表格可以用表格插件来完成,如果不用的话也不是那样去写的;爱莫能助

支持(0) 反对(0) 文动我心 | 园豆:311 (菜鸟二级) | 2022-02-23 09:56

@文动我心: 刚开始接触前端,不大懂。是应该用内部样式去写吗?

支持(0) 反对(0) Psyduckkk | 园豆:6 (初学一级) | 2022-02-23 10:45
0

可以用clss定义,然后统一去写样式,这样代码看起来简洁明了,找错也比较容易

XZ_JW | 园豆:204 (菜鸟二级) | 2022-06-08 11:59
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册