CSS一行代码就可以解决第一个问题:

1.1 根据文字长度,自适应标签宽度

解决方法:把width的设置删掉,加一行代码 display:table;

.tag-footdetail{
  /*width: 300px;*/
  height: 40px;
  font-size: 1.5rem;
  line-height: 40px;
  text-align: center; 
  border-radius: 15px;
  border: 1px solid #D2B991;
  float: left;
  margin-right: 30px;
  margin-bottom: 10px;
  background-color: #D2B991;
  color: black;
  display:table;
}

1.2 根据文字长度,自适应标签高度

CSS中

height:auto;

display:inline-block;

2.Uncaught ReferenceError: xxx is not defined at HTMLDivElement.onclick

解决方法:

1)注意引用juery是否有错 对应的<script>行代码请认真检查

2)这其实是个很简单的问题,主要是注意xxx是否是个字符串,要不要加引号。

以下为例,value.id和value.name 都是需要加' '的,加上之后可以解决这个问题。

function renderFootData(data) {
    $.each(data.result, function(index, value) {
    var html = '<div class="tag" style="font-size:28px;" onclick="getfootid(\''+value.id+'\',\''+value.name+'\');">'
    + value.name
    + '</div>';
    $("#foot-data-list").append($(html));
    });
}

[frontend] 根据文字长度 自适应宽度 自适应高度+ Uncaught ReferenceError: xxx is not defined at HTMLDivElement.onclick的更多相关文章

  1. 基于jQuery自适应宽度跟高度可自定义焦点图

    基于jQuery自适应宽度跟高度可自定义焦点图.这是一款带左右箭头,缩略小图切换的jQuery相册代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section cl ...

  2. 黄聪:table自适应宽度和高度

    自适应宽度: td { width: 1px; white-space: nowrap; /* 自适应宽度*/ word-break: keep-all; /* 避免长单词截断,保持全部 */ } 自 ...

  3. UIWebView获得内容的高 高度自适应 宽度自适应

    UIWebView获得内容的高-作出自适应高的UIWebView- (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *height ...

  4. 移动端canvas文字图片合成并生成图片(canvas宽度自适应移动端屏幕)

    这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...

  5. 【接上一篇】winform中dataGridView高度和宽度自适应填充完数据的高度和宽度,即dataGridView根据数据自适应大小

    上一篇:winform中dataGridView高度自适应填充完数据的高度 winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度 ...

  6. css和css3弹性盒模型实现元素宽度(高度)自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. 纯CSS实现Div高度根据自适应宽度(百分百调整)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. CSS学习笔记(6)--浮动,三列布局,高度宽度自适应

    百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...

  9. EasyUI设置Layout自适应浏览器宽度和高度

    //设置自适应浏览器宽度和高度 function setLayoutHeight() { var height = $(window).height() - 20; $("#main_lay ...

随机推荐

  1. ubuntu下的代码格式化工具

    indent -kr -i4   SimpleMail.java 可以用,但是太简单 astyle 这个工具不错 http://astyle.sourceforge.net/ astyle --sty ...

  2. 【SSH之旅】一步步学习Hibernate框架(一):关于持久化

    在不引用不论什么框架下,我们会通过平庸的代码不停的对数据库进行操作,产生了非常多冗余的可是又有规律的底层代码,这样频繁的操作数据库和大量的底层代码的反复书写极大的浪费了程序人员的书写.就在这样一种情况 ...

  3. ACdream 1112 Alice and Bob (博弈&amp;&amp;素数筛选优化)

    题目链接:传送门 游戏规则: 没次能够将一堆分成两堆 x = a*b (a!=1&&b!=1)x为原来堆的个数,a,b为新堆的个数. 也能够将原来的堆的个数变成原来堆的约数y.y!=x ...

  4. Android 线程 Looper.prepare()、Looper.loop() 使用

    优化项目过程中发现了一个非常Low的问题,整理一下.备忘: 说问题之前先看下HandlerThread的定义 一个封装了looper的线程:   Looper用于封装了android线程中的消息循环. ...

  5. Android按键添加和处理的方案【转】

    本文转载自:http://www.cnblogs.com/skywang12345/p/3142851.html Android按键添加和处理的方案  版本号 说明 作者 日期  1.0  Andro ...

  6. Codeforces--598A--Tricky Sum(数学)

     Tricky Sum Tricky SumCrawling in process... Crawling failed Time Limit:1000MS     Memory Limit:26 ...

  7. [CTSC 2008] 祭祀

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1143 [算法] 答案为最小路径可重复点覆盖所包含的路径数,将原图G进行弗洛伊德传递闭 ...

  8. 截取字符(substr)检索字符位置(instr)

    1.SUBSTR(string,start_position,[length]) 求子字符串,返回字符串注释: string 元字符串start_position 开始位置(从0开始)length 可 ...

  9. (Go)11.九九乘法表示例

    //九九乘法表 package main import ( "fmt" ) func chengfa() { ; m < ; m ++ { ; n <= m; n++ ...

  10. Colored Sticks(trie)

    http://poj.org/problem?id=2513 题意:给一些木棒,木棒两端图上颜色,将端点颜色相同的木棒连在一起,问是否能连成一条直线. 思路:将两端的颜色看成点,将木棒看成边,判断是否 ...