码字小白菜努力中 2024-04-05 21:50 采纳率: 88%
浏览 12
已结题

Hbuilder里怎么将文字内容在右边展示？

Hbuilder里怎么将页面左右分开，左边是图示，右边需要有文字描述，怎么设置div模块呢

以下是html文件


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>苏菲卫生巾可视化系统数据分析</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
        <script src="js/echarts.min.js"></script>
        <script src="js/china.js"></script>
        <link rel="stylesheet" href="css/sf_intro.css">
        
    </head>
    <body>
        <!-- <div class="loading"> -->
          <!-- <div class="loadbox"> < img src="images/loading.gif"> 页面加载中... </div> -->
        <!-- </div> -->
        <div class="head">
          <h1>苏菲卫生巾可视化系统数据分析</h1>
          <div class="time" id="showTime">2019/12/05 16:16:54</div>
        <script>
            var t = null;
            t = setTimeout(time,1000);//開始运行
            function time()
            {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y=dt.getFullYear();
            var mt=dt.getMonth()+1;
            var day=dt.getDate();
            var h=dt.getHours();//获取时
            var m=dt.getMinutes();//获取分
            var s=dt.getSeconds();//获取秒
            var t = null;
            document.getElementById("showTime").innerHTML = y+"/"+Appendzero(mt)+"/"+Appendzero(day)+" "+Appendzero(h)+":"+Appendzero(m)+":"+Appendzero(s)+"";
                function Appendzero(obj){
                    if(obj<10) return "0" +""+ obj;
                    else return obj;
                }
            t = setTimeout(time,1000); //设定定时器，循环运行     
            } 
        
        </script>
            
        </div>
        
        <div class="container">
            <!-- 左侧内容 -->
            <div class="left" >
                <h2>消费者评论年份特征</h2>
            </div>
            <div id="days" style="width: 820px;height:600px;"></div>
            
            <div class="right">
            <!-- 右侧内容 -->
            <p>文字内容</p >
            </div>
        
        </div>
        
    </body>
</html>

<script type="text/javascript">
var chartDom = document.getElementById('days');
var myChart = echarts.init(chartDom);
var option;
option = {
  xAxis: {
    type: 'category',
    data: ['2014','2015','2016','2017','2018','2019', '2020', '2021', '2022', '2023', '2024'],
    axisLabel: {
       show: true,
        textStyle: {
          color: 'white',  //更改坐标轴文字颜色
          fontSize : 12      //更改坐标轴文字

以下是css文件


@charset "utf-8";

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box}
*,body{padding:0px;    margin:0px;font-family: "微软雅黑";}
body{ background:#000d4a url(../images/bg.jpg) center ; background-size:cover;color:#fff; font-size: .1rem; }

html,body{height: 100%;}
.clearfix:after, .clearfix:before {display: table;content: " "}
 .clearfix:after {clear: both}
.pulll_left{float:left;}
.pulll_right{float:right;}
/*谷哥滚动条样式*/
  ::-webkit-scrollbar {width:5px;height:5px;position:absolute}
  ::-webkit-scrollbar-thumb {background-color:#5bc0de}
  ::-webkit-scrollbar-track {background-color:#ddd}
/***/

.head{ height:3.5rem; background: url(../images/head_bg.png) no-repeat center center; background-size: 100% 100%; position: relative}
.head h1{ color:#fff; text-align: center; font-size:2.2rem; line-height:.8rem; letter-spacing: -1px;margin-top: 1.5rem;}
.time{ position:absolute; right:.15rem; top:15; line-height: .75rem;color:rgba(255,255,255,.7); font-size: 1rem; padding-right: .1rem;font-family:electronicFont;padding-right: 1rem;}

.container{ padding:0 .2rem .2rem .2rem;  background: rgba(6,48,109,.5); position: relative; margin-bottom: .15rem; z-index: 10; }
.left h2{position: absolute;text-align: center;font-size: 1.1rem;margin-left: 18rem;margin-top: 0.8rem;}
.right p{position:relative ;text-align:center;font-size: 1.1rem;}
  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-04-05 21:50
    关注

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

    好的，我很乐意为您解答关于HBuilder如何在页面左右分隔的问题。根据您的需求，我们需要实现一个可以显示文字内容的左侧面板和右侧面板。

    首先，我们需要在左侧面板创建一个HTML元素用于显示文本。然后，在右侧面板创建另一个HTML元素，用于显示数据。

    下面是完整的代码示例：

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Suzy卫生巾可视化系统数据分析</title>
    <style>
        body {
            font-family: "微软雅黑", sans-serif;
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            overflow-y: scroll;
            background-color: white;
        }
        .left {
            width: 40%;
            float: left;
            text-align: left;
        }
        .right {
            width: 40%;
            float: right;
            text-align: right;
        }
        #days {
            width: 820px;
            height: 600px;
            position: absolute;
            bottom: 0;
            background-color: #f0f0f0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left" style="width: 40%;">
            <h2>Suzy卫生巾可视化系统数据分析</h2>
        </div>
        <div id="days" style="width: 820px;height: 600px;"></div>
        <div class="right">
            <h2>消费者评论年份特征</h2>
        </div>
    </div>
    <script type="text/javascript">
        // 设置初始值
        var dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth()+1;
        var day = dt.getDate();
        var h = dt.getHours();
        var m = dt.getMinutes();
        var s = dt.getSeconds();

        // 实现分割逻辑
        function appendzero(obj) {
            if(obj<10) return "0" +""+ obj;
            else return obj;
        }

        var leftDiv = document.createElement('div');
        leftDiv.id = 'days';
        leftDiv.style.width = '40%'; // 40%
        leftDiv.style.float = 'left'; // 左边
        leftDiv.style.textAlign = 'left'; // 文字位置
        leftDiv.style.height = 'auto';
        leftDiv.style.top = '0'; // 顶部
        leftDiv.style.bottom = '600px'; // 最底部
        leftDiv.appendChild(document.createTextNode(y));
        document.body.appendChild(leftDiv);

        var rightDiv = document.createElement('div');
        rightDiv.id = 'days';
        rightDiv.style.width = '40%'// 40%
        rightDiv.style.float = 'right'; // 右边
        rightDiv.style.textAlign = 'right'; // 文字位置
        rightDiv.style.height = 'auto';
        rightDiv.style.top = '-600px'; // 前部
        rightDiv.appendChild(document.createTextNode(day));
        document.body.appendChild(rightDiv);

        var yearDiv = document.createElement('div');
        yearDiv.id = 'years';
        yearDiv.style.width = '20%' // 20%
        yearDiv.style.float = 'right'; // 右边
        yearDiv.style.textAlign = 'right'; // 文字位置
        yearDiv.style.height = 'auto';
        yearDiv.style.top = '-400px'; // 前部
        yearDiv.appendChild(document.createTextNode(yourYear));
        document.body.appendChild(yearDiv);

        // 添加数据显示
        setInterval(function(){
            var x = Math.floor((Math.random() * 25) * 24);
            var y = Math.floor((Math.random() * 60) * 120);
            var m = Math.floor((Math.random() * 60) * 60);
            var h = Math.floor((Math.random() * 24) * 12);
            var w = appendzero(new Date().getDay());
            var txtWidth = appendzero(Math.max(w*32,30));
            var txtHeight = appendzero(y*25);
            var txtCenter = appendzero(x/2 - txtWidth/2);
            var txtLeft = appendzero(x/2 - txtHeight/2);
            var txtTop = appendzero(y/2 + txtHeight/2);
            var txtRight = appendzero(y/2 + txtWidth/2);
            leftDiv.innerHTML = txtLeft + "<br>" + txtTop + "<br>" + txtCenter + "<br>" + txtRight + "<br>";
            rightDiv.innerHTML = txtRight + "<br>" + txtTop + "<br>" + txtCenter + "<br>" + txtRight + "<br>";
        }, 60000);
    </script>
</body>
</html>

    这段代码首先设置了初始日期和时间，然后分别设置了左侧和右侧的面板的高度和宽度。接下来，通过随机数生成用户当前年的年份，并将其添加到右侧的面板中。然后，通过随机数生成每个星期中的小时、分钟和秒数，并将其添加到左侧的面板中。最后，通过随机数生成每个单元格的内容，并将其添加到左侧的面板中。由于字体大小限制，这段代码只能提供较大的可视效果，但可以根据需要进行调整。

    请注意，上述代码中的appendzero(obj)函数是一个简单的文本字符串生成函数，它会生成一个新的字符串，并插入到指定的位置。您可以根据实际需求对这个函数进行修改。如果您有其他问题，请随时向我提问。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 4月6日
  • 已采纳回答 4月6日
  • 创建了问题 4月5日

悬赏问题

  • ¥30 为什么会失败呢，该如何调整
  • ¥50 如何在不能联网影子模式下的电脑解决usb锁
  • ¥20 服务器redhat5.8网络问题
  • ¥15 如何利用c++ MFC绘制复杂网络多层图
  • ¥20 要做柴油机燃烧室优化 需要保持压缩比不变 请问怎么用AVL fire ESE软件里面的 compensation volume 来使用补偿体积来保持压缩比不变
  • ¥15 python螺旋图像
  • ¥15 算能的sail库的运用
  • ¥15 'Content-Type': 'application/x-www-form-urlencoded' 请教 这种post请求参数，该如何填写？？重点是下面那个冒号啊
  • ¥15 找代写python里的jango设计在线书店
  • ¥15 请教如何关于Msg文件解析