css多行布局错乱

原图：

自己实现的图：

存在问题：那个“进入”按钮无法向原图那样排序，要是使用position相对位置的话，就会在不同的尺寸下乱跑。

自己的实现代码：

怪兽必须死
热门
推荐
精品
保卫家园，人在城在！

css代码：

.row .image {

float: left;

width:50px;

height:50px;

margin-right:10px

}

.row .title {

}

.title .gameTitle {

display: inline;

float: left;

font-size: 16px;

margin:0px;

}

.title .hot {

float: left;

display: inline;

margin-left: 2px;

font-size: 2px;

color:#fd9b01;

padding:1px;

border:1px solid #fd9b01;

vertical-align: middle;

}

.title .rec {

float: left;

display: inline;

margin-left: 2px;

font-size: 2px;

padding:1px;

color:#1a7d03;

border:1px solid #1a7d03;

}

.title .fine {

float: left;

display: inline;

margin-left: 2px;

font-size: 2px;

padding:1px;

color:#6d16bf;

border:1px solid #6d16bf;

}

.title .des {

margin-top: 0px;

width: 200px;

font-size: 12px;

color: #888888;

}

.title .btnIn {

float: left;

width: 150px;

}

相关阅读:

使用手势库hammer给元素添加类出现的问题?

有没有learn php the hard way

装nodejs 安装不了

有关css3 pointer-events：none;属性的问题

正则表达式匹配圆点(".")的疑问

PHP抓取别的网站的数据用什么方案比较好？

网站前后端分离问题

微信支付应用签名修改后多久可以生效？

js中，位操作符的用处？

angualrjs中$timeout和$interval什么区别？

intellij idea 查找变量快捷键

Node程序换用Express4之后上传图片出问题了，请高手帮忙看下~

OAuth认证方式推荐

uc浏览器的点击效果问题自带

编译安装git的时候出现这个错误信息表示什么意思？

nodeJS重新获取token的逻辑如何设计？

如何用java进行多串口通信?

PHP 最长公共子序列LCS 中文汉字版本怎么写？

ajax级联操作的时候，总是报这个错误

iOS初级程序员面试题 const 关键字

php css错乱,css,html_css多行布局错乱，css,html - phpStudy相关推荐

  1. css块级元素变行内元素,css块级元素和行内元素

    块级元素: 1.display为block 2.会独占一行,导致换行 3.可以设置宽高 4.margin外边距设置都有效 5.padding内填充都有效 6.可以容纳行内元素和块级元素,也可以容纳内联 ...

  2. css设置1.5倍行高,用css样式设置行高：

    代码1: [◇ 一月送你一个吉祥 ◇] [◇ 二月送你一个如意 ◇] [◇ 三月送你一个快乐 ◇] [◇ 四月送你一个欢喜 ◇] [◇ 五月送你一个健康 ◇] [◇ 六月送你一个福气 ◇] [◇ 七月 ...

  3. 小程序跳转样式布局错乱_解决导致CSS布局页面错乱的方法

    在做网站建设中,经常会遇到css布局页面错乱,下面是如解决错乱的方法. 1. float元素务必指定width属性 很多浏览器在显示未指定width的float元素时会有bug.所以不管float元素 ...

  4. html5多行布局,css常用布局多行多列

    CSS布局常用的方法:float : none | left | right 取值: none : 默认值.对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工 ...

  5. 基于REM的CSS在Android4.4及5.0部分机型出现布局错乱

    使用rem做为长度单位来布局,如今已经变得非常的常见,因为它可以适应各种屏幕尺寸.rem采用html的font-size属性作为基本单元,假如font-size是18px,那么2rem=18px * ...

  6. flex 单独一行_Flex网页布局一CSS弹性伸缩盒子语法教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  7. 【css】如何实现响应式布局

    "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" c ...

  8. CSS中的EM属性-弹性布局

    使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的 东西,前段时间在项目 ...

  9. css学习笔记（三）——布局模型

    布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末 ...

最新文章

  1. Science | 谷岩/王朗团队揭示大脑中的免疫细胞竟是记忆遗忘的“主谋”
  2. java获取服务器信息吗_java获取服务器一些信息的方法
  3. JavaScript 的内部字符编码是 UCS-2 还是 UTF-16
  4. Dotnet中Span, Memory和ReadOnlySequence之浅见
  5. [SpringBoot2]web场景_SpringBoot2_SpringMVC自动配置概览
  6. [转载] 整理总结 python 中时间日期类数据处理与类型转换(含 pandas)
  7. c语言实现--单向循环链表操作
  8. 垃圾回收相关算法总结
  9. java比较两个对象_Java比较两个对象
  10. ESP8266串口转wifi模块AT指令调试TCP通信
  11. matlab运行.m文件的命令,Matlab：从命令行运行m文件
  12. Guass-Legendre（高斯-勒让德）求积方法 | Guass型求积公式 + Legendre多项式
  13. DTOJ#5208. 蓝buff一吃就起飞
  14. 基于微信小程序的教学评价平台设计与实现
  15. java 跳出递归_java中途强制跳出递归
  16. 乐视x820android最新版本,乐视MAX2|MIUI10|安卓8.1|最终完美版极速流_最新最全的乐Max2ROM刷机包下载、刷机教程...
  17. JZOJ.4377[GDOI2016模拟3.10]习用之语 解题报告
  18. 识别12306验证码脚本
  19. Beyond compare官方中文版下载
  20. Oracle学习笔记4

热门文章

  1. 如何给 SAP Fiori Elements 应用的字段添加 value help
  2. TypeScript 工具类型 - Utility Types
  3. 调试Angular指令实现时一个有用的内部属性：__ngContext__
  4. rxjs里combineLatest operators的用法
  5. jasmine.FunctionMatchers.toHaveBeenCalledWith的单步调试
  6. 脑部手术成功，只是万里长征走完了第一步
  7. SAP CRM的订单模型移植到S4HANA后，在订单保存功能上作出的改进
  8. Hybris的extension和ABAP的package
  9. Angular框架里两个模块的互相依赖
  10. SAP document builder一些常见问题的解答