小六*^____^* 2024-03-13 12:58 采纳率: 18.2%
浏览 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属性以适应不同设备屏幕尺寸。

    评论 编辑记录

报告相同问题？

  • 前端如何实现瀑布式布局
    2024-10-06 10:52
    暗冰ཏོ的博客 前端如何实现瀑布流布局
  • 前端&移动端布局详解
    2025-04-06 14:15
    FE_Jinger的博客 响应式布局通过媒体查询、流式单位、弹性模型实现多端适配，而rem和em分别服务于全局与局部尺寸控制。浏览器默认 16px 根字体是历史与可读性平衡的结果，开发者可通过动态调整根字体或使用视口单位（如vw）优化响应...
  • 前端实现响应式布局的几种方法
    2022-03-19 21:46
    holden丶的博客 分享一下常用的响应式布局方法，flex布局、百分比布局、rem布局、媒体查询、自适应布局
  • 前端的grid布局方式
    2024-07-03 10:30
    黑暗空间无限循环的博客 Grid布局方式，又称为CSS网格布局，是W3C提出的一个二维布局系统，它允许开发者以行和列的形式来布局网页内容。Grid布局提供了丰富的属性和方法来精确控制布局的各个方面，包括网格的创建、网格项目的位置、大小以及...
  • 【干货】一文详解前端布局
    2023-07-03 15:29
    小魔女千千鱼的博客 百分比布局是一种常用的前端布局方式，它可以根据父元素的宽度或高度来设置子元素的尺寸。通过使用百分比单位，可以实现响应式布局，使页面在不同设备上都能适应不同的屏幕尺寸。在百分比布局中，可以使用百分比来...
  • 前端页面布局之双飞翼布局
    2022-07-13 18:48
    一只爱吃萝卜的小兔子的博客 设置父元素相对布局，用来实现内部元素的绝对布局。 效果： 将注释内的内容加上： 作用是 1.盒模型的尺寸（宽高）是包含content、padding、border全部在内的尺寸； 2.将所有元素的外边距设置为0 效果： 效果：.......
  • 前端实现拖拽的方案
    2023-04-06 17:17
    望京十三兄的博客 三方类库实现拖拽 PixiJS Examples H5设置元素 draggable 属性 每个元素都有draggable 属性，不过默认是false，我们把需要拖放的元素 draggable 属性设置为 true，可实现拖拽功能 此时，元素已经可以拖动了，但会...
  • 前端实现打印功能_前端打印
    2024-05-28 01:10
    2401_85124851的博客 确保打印的兼容性 总结： 前端实现打印功能的方法有很多，大家在网上随便一搜就是一大堆，在这里，我主要选择一个我觉得比较好一点的实现方式来进行解释描述： 方法一：window.print() 这个命令默认打印整个页面的...
  • 前端布局 Flex（弹性）布局
    2022-10-15 09:00
    满天星567的博客 前端布局中的Flex布局
  • 前端常用布局大全——细致讲解
    2022-01-07 20:19
    菜鸟丶攻城狮的博客 作为一名前端开发者，每天都在和浏览器打交道，而浏览器中展示的网页需要做的很美观，并且可以吸引住用户浏览网页，提升用户体验是很重要的，所以不可避免的就要用到各种各样的布局。今天就来列举一下各种常用布局...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 3月13日