小六*^____^* 2024-03-13 12:58 采纳率: 20%
浏览 4

前端怎么实现这种布局

前端怎么实现这种布局，渲染的内容是动态的，不知道具体内容的长度

img

  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-03-13 12:58
    关注

    引自免费微信小程序：皆我百晓生

    实现这种布局的关键在于使用CSS Flexbox或Grid布局来适应动态内容的长度。下面是一个使用Flexbox的解决方案示例：

    假设你有一个包含多个子元素（如div）的容器，每个子元素代表一个属性及其值对，你可以按照以下方式编写HTML和CSS：

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
            flex-wrap: wrap; /* 允许换行 */
            justify-content: space-between; /* 子元素间均匀分布 */
            padding: 20px;
        }
        
        .item {
            flex-basis: calc(50% - 10px); /* 每个子元素占据大约一半宽度 */
            margin-bottom: 10px;
            border: 1px solid #ccc;
            padding: 10px;
        }
        
        .label {
            font-weight: bold;
            width: 100%;
            display: inline-block;
            text-align: right;
            margin-right: 10px;
        }
        
        .value {
            display: inline-block;
            width: calc(100% - 100px);
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 动态生成的内容 -->
        <div class="item">
            <div class="label">所在地区：</div>
            <div class="value">广东省深圳市</div>
        </div>
        <!-- 更多类似项目... -->
    </div>
</body>
</html>

    在上述代码中，.container 使用了 Flexbox 布局，并允许子元素换行显示。.item 是每个属性及值对所在的div，其宽度根据屏幕大小自适应调整。.label 和 .value 分别用于样式化属性名称和值。

    对于动态内容，你需要在后端或者前端JavaScript中根据实际获取的数据填充到对应的.label和.value中。

    请注意，这只是一个基础示例，实际布局可能需要根据你的设计进行调整，比如调整间距、字体大小、颜色等样式，以及根据响应式设计要求更改.item的flex-basis属性以适应不同设备屏幕尺寸。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 3月13日

悬赏问题

  • ¥15 unity第一人称射击小游戏，有demo，在原脚本的基础上进行修改以达到要求
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？
  • ¥15 加热介质是液体，换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染