divs在容器div中的水平排列不稳定。

我想让4个div在一个父div中水平排列。父 div 的宽度为:100%,所有子 div 的宽度为:20%。

所有的子 divs 宽度:20%; 我希望剩下的 20% 是空的,均匀分布在它们之间(每两个 divs 之间大约 7%)。

我已经尝试了这段代码。

<div id="header" style="position:absolute; width:90%; border:2px solid black;">
    <div id="h_left" style="left:0; border:1px dotted black; width:20%;"> Left side material </div>
    <div id="h_center1" style="margin:auto; border:1px dotted black; width:20%;"> Center 1 material </div>
    <div id="h_center2" style="margin:auto; border:1px dotted black; width:20%;"> Center 2 material </div>
    <div id="h_right" style="right:0; border:1px dotted black; width:20%;"> Right side material </div>
</div>

但结果令人失望enter image description here

我如何改进我的代码,使所有的divs都能相应地对齐,并且它们之间的空间相等?

解决方案:

divs是一种显示方式 block 按标准。这意味着每个人都会在自己的行。我建议你做一个1小时的CSS免费入门课程,它将帮助你解决所有这些假设。

你可以做你想要的风格,有很多选择。但我建议使用flex box。Flex box和Grid将是你在CSS中的朋友。这里是一个 简易指南 我还是参考一下。

    <div
      style="display: flex; justify-content: space-between; position:absolute; width:90%; border:2px solid black;"
    >
      <div id="h_left">Left side material</div>
      <div id="h_center1">Center 1 material</div>
      <div id="h_center2">Center 2 material</div>
      <div id="h_right">Right side material</div>
    </div>

给TA打赏
共{{data.count}}人
人已打赏
未分类

在Keras中用Tensorflow后端实现双编码器LSTM

2022-9-8 14:29:44

未分类

在Reactjs中使用fetch处理ajax请求时出错。

2022-9-8 14:29:46

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索