- 这样一个简单的布局CSS该怎么写？
-
先说好，本人不擅长CSS。
基本的结构如下：
-
Title0
content0
-
Title1
content1
- ......
最后形成如下样子:
上下左右对齐，居中对齐...等等
[img]http://dl2.iteye.com/upload/attachment/0096/9047/73df9f2b-9a68-336c-b1c1-73975cc0600b.png[/img]
-
![http://dl2.iteye.com/upload/attachment/0096/9047/73df9f2b-9a68-336c-b1c1-73975cc0600b.png[/img]](http://dl2.iteye.com/upload/attachment/0096/9047/73df9f2b-9a68-336c-b1c1-73975cc0600b.png%5B/img%5D){kind=link}
-
- gundumw100 CSS实在让人蛋疼，特别是布局元素的时候，总是让我摸不着头脑，要是有android的线性布局，网格布局啊什么的就好了。
- 5 年多之前 回复
-
- gundumw100 我只是想迅速实现这样的布局，否则学习成本太高，不想闹大。
- 5 年多之前 回复
-
- iteye_7115 你要写手机界面 ，还是类似这个效果的web页面？
- 5 年多之前 回复
-
- gundumw100 是手机端的页面。
- 5 年多之前 回复
- 其他相关推荐
- 怎么用css实现图片中的布局
-  请教, 怎么用css实现图片中的布局, 可以帮忙写一段吗
- 不会div+css盒子的布局
- 是那种div+ cssd 盒子代码布局 一个关于7个盒子代码的布局 上面三个盒子，下面三个盒子 最下面一个大盒子 谢谢大神
- 关于css 双飞翼布局问题
- TAT...最后8个币，一段时间不上，咋以前10块能冲200币的现在98才能冲250币，c s d n想钱想疯了吧，对于我这水平有没有什么能来币的方法？。。。。 在双飞翼布局中，有几点不是很懂，求大神点拨。 1.设置.inner margin-left很好理解，就是要让#inner里面的内容从网页中间开始显示，但是为什么要设置 margin-right呢？（我去掉对布局好像也没影响） 2.对于1 我的猜想是 想让inner里面的内容右边受控制，但是我给inner里面填满了内容，发现**内容不能换行**，这是为什么？ 同时发现 left 和right里面的文字都不能自动换行 3.取消middle的width=100% 猜测应该继承body的宽度，结果实际值远比body大的多 这是为什么呢？   ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .columns{ float: left; height: 100px; } #middle{ background-color: deepskyblue; width: 100%; } #inner{ margin-left: 200px; margin-right: 150px; } #right{ width: 150px; background-color: red; margin-left: -150px; } #left{ width: 200px; background-color: grey; margin-left: -100%; } </style> </head> <body> <div id="middle" class="columns"> <div id="inner" >#middle#middlekjzdakskshdkahdkahdkahsdkadhkajdhkahdkahdkahdkadhkahdskashdskasdhkahdkadhskashdskaahskdhakshdaksdhkashdkashdakshdkahdkahdkah</div> </div> <div id="left" class="columns">#left</div> <div id="right" class="columns">#right</div> </body> </html> ```
- 关于css中的布局的问题
- 如下所示的一个结构 ``` <div id="parent"> <div id="left"></div> <div id="right"> <div id="in"></div> </div> </div> ``` 大致的结构如上，left和right是parent下的，而且一个在左，一个在右。右边的这个div里有一个in的div。现在问题就是，想让left的高度随着parent变化而变化，而parent的高度随着right的变化而变化，而right的高度随着in的变化而变化。那么这个要怎么实现呢？
- 这样一个布局如何用HTML5和CSS3来显示？
- 
- 为什么我的div+css布局做不到和他的一样?求解谢谢啦
- 想练习一个div布局,随便找了网截图开始做,下面是原图  然后我切的图:  做到一半打开网页后却是这样的  代码是这么写的 ``` <div class="main"> <div class="A1"> <img src="A1-P.jpg"/> <p>联想(Lenovo)Y430p 14英寸<strong>笔记本</strong>电脑(I5-4210M 4G 1TB GTX850M 2G</p> <div class="price"> ￥4649.00 <img class="sale" src="sale.gif"/> </div> </div> </div> 然后下面的是css ``` `*{padding:0; margin:0;} nav{width:100%; height:200px; background:#ccc;} .main{padding:50px 0 50px 30px;} .A1{width:200px; height:269px;} .A1 p{font:12px/18px 微软雅黑; color:#666;} .A1 p strong{color:#f70; margin-bottom:5px;} .A1 .price{height:16px; width:200px; line-height:16px; font-size:12px; color:#ff0000;} .A1 .price .sale{display:block; float:right;}`` ``` 实际打开网页后为什么是那样的 头疼, 为什么人家的文字 和 下面的 "赠" 对的那么整齐 ,我的不行 难道我要用css控制一下文字的间距? 还是调一下"赠的位置",感觉方法都不怎么好. 想得到一种思路,谢谢啦
- 前端CSS布局，两个div 为inline-block, 在一个内部添加p会影响另外一个的布局原因？
- 就是左右两个div是display:inline-block; 但是当我往第一个div中插入块级标签时，右边的div自动往下移动，这是为什么呢？先谢过各位大佬了
- 问大神一个CSS表格布局
- 如可让表格上面的图片居中。下面的文字保持不变 td width="45%" img src="images/ld.png" width="26" height="26" class="mr10"/<br/> 带班领导 /td
- html和css布局怎么适配不同的分辨率
- 用html和css布局的页面，自己的电脑是1365 736的分辨率，放在1920 1080分辨率的屏幕上排版就乱了，这应该怎么解决
- 新手求教一个div+css的布局问题
- 请问用div+css如何实现图片上的布局，并且能够自动适应设备分辨率，求一个源代码参考，谢谢
- 下面这种布局如何用HTML或css写出来？
- 本人初学HTML，求指点这个布局的代码是怎么写的？！ 十分感谢！！！ 
- 引用jQueryUI accordion css布局问题
- 我想把这个改短一点，可是修改坏了，
- 能否用div+css使div这样布局
- 能否把四个div 布局成如图的形式。[img]http://dl.iteye.com/upload/attachment/501298/92fb535a-0576-3f21-9648-d3343bacd543.jpg[/img]
- DIV + CSS设计中的DIV是指的html中的div标签吗？
- 在DIV+CSS设计中的DIV如果是div标签的话， 那么DIV+CSS的意思就是换行标签与层叠样式表。 这个意思好像有些别扭。
- 求教，CSS两栏布局，一列固定一列自适应为题
- 左列为自适应布局没有设宽度，右列设固定宽度，用了float布局，但是发现左右列不在同一行，固定宽度的列被挤到了下方，是什么原因呢？ 求大神指教！！！
- 在用html和css做页面布局，跪求页面布局的相关标记！
- 老师让我做页面布局的串讲，感觉页面布局涉及好多，目前还没学到javascript，但是html和css的相关页面布局的就有很多啊，脑子一团乱，不知道该怎么梳理，跪求大神指点迷津！！！
- div+css布局的一个很小问题,求解,谢谢了
- ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0; padding:0;} .A{width:950px; height:40px; background:#ccc;} .nav{width:800px; height:20px; background:blue; margin-top:5px;} </style> </head> <body> <div class="A"> <div class="nav"></div> </div> </body> </html> ``` 在我的想象中, 打开浏览器应该是这样的  然而,实际上,打开浏览器却是这样的  为什么会这样, margin-top为什么不基于他外面的大盒子,而是基于外面显示?
- css样式布局 div背景色随鼠标改变而改变
-   布局成图片展示的样式 重点是 那个刻度怎么来实现？？ 效果就是 鼠标（可以点下 然后拖 只有实现就可以啊 ）往上移动时背景颜色由灰变红 到鼠标所在的位置。鼠标往下移动时反之~~~~
- css浮动元素居中布局问题
- 为什么child就是竖直居中不了呢?? <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .parent{ position:relative; border:1px solid #ddd; height:1.5em; } .wraper{ float:left; position:absolute; left:50%;top:50%; clear:both; } .child{ position:relative; left:-50%;top:-50%; } </style> </head> <body> <div class="parent"> <div class="wraper"> <div class="child">我水平居中了哦</div> </div> </div> <script type="text/javascript"> $=function(){ var elem=this===window?document.querySelectorAll(arguments[0]):this querySelectorAll(arguments[0]); return elem.length==1?elem[0]:elem.length>1?elem:null; } var parent=$(".parent"); var wraper=$(".wraper"); var child=$(".child"); function getStyle(obj){ var style=getComputedStyle(obj); return "向下移了:"+style.top+";"+"我的高度:"+style.height; } console.log(getStyle(parent)); console.log(getStyle(wraper)); console.log(getStyle(child)); </script> </body> </html>
- Java学习的正确打开方式
- 在博主认为，对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结，前三者博主将淋漓尽致地挥毫于这篇博客文章中，至于总结在于个人，实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍，博客次之，这又是一个层次了，这里暂时不提后面再谈。博主将为各位入门java保驾护航，各位只管冲鸭！！！上天是公平的，只要不辜负时间，时间自然不会辜负你。 何谓学习？博主所理解的学习，它是一个过程，是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
- 程序员必须掌握的核心算法有哪些？
- 由于我之前一直强调数据结构以及算法学习的重要性，所以就有一些读者经常问我，数据结构与算法应该要学习到哪个程度呢？，说实话，这个问题我不知道要怎么回答你，主要取决于你想学习到哪些程度，不过针对这个问题，我稍微总结一下我学过的算法知识点，以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的，并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构，当然，我也会整理一些看过...
- 大学四年自学走来，这些私藏的实用工具/学习网站我贡献出来了
- 大学四年，看课本是不可能一直看课本的了，对于学习，特别是自学，善于搜索网上的一些资源来辅助，还是非常有必要的，下面我就把这几年私藏的各种资源，网站贡献出来给你们。主要有：电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意：文中提到的所有资源，文末我都给你整理好了，你们只管拿去，如果觉得不错，转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
- linux系列之常用运维命令整理笔录
- 本博客记录工作中需要的linux运维命令，大学时候开始接触linux，会一些基本操作，可是都没有整理起来，加上是做开发，不做运维，有些命令忘记了，所以现在整理成博客，当然vi，文件操作等就不介绍了，慢慢积累一些其它拓展的命令，博客不定时更新 free -m 其中：m表示兆，也可以用g，注意都要小写 Men：表示物理内存统计 total：表示物理内存总数(total=used+free) use...
- 比特币原理详解
- 一、什么是比特币 比特币是一种电子货币，是一种基于密码学的货币，在2008年11月1日由中本聪发表比特币白皮书，文中提出了一种去中心化的电子记账系统，我们平时的电子现金是银行来记账，因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述，这一层面介绍的文章很多，本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
- 程序员接私活怎样防止做完了不给钱？
- 首先跟大家说明一点，我们做 IT 类的外包开发，是非标品开发，所以很有可能在开发过程中会有这样那样的需求修改，而这种需求修改很容易造成扯皮，进而影响到费用支付，甚至出现做完了项目收不到钱的情况。 那么，怎么保证自己的薪酬安全呢？ 我们在开工前，一定要做好一些证据方面的准备（也就是“讨薪”的理论依据），这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发...
- 网页实现一个简单的音乐播放器（大佬别看。(⊙﹏⊙)）
- 今天闲着无事，就想写点东西。然后听了下歌，就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
- Python十大装B语法
- Python 是一种代表简单思想的语言，其语法相对简单，很容易上手。不过，如果就此小视 Python 语法的精妙和深邃，那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点，并附上详细的实例代码。如能在实战中融会贯通、灵活使用，必将使代码更为精炼、高效，同时也会极大提升代码B格，使之看上去更老练，读起来更优雅。
- 数据库优化 - SQL优化
- 以实际SQL入手，带你一步一步走上SQL优化之路！
- 通俗易懂地给女朋友讲：线程池的内部原理
- 餐盘在灯光的照耀下格外晶莹洁白，女朋友拿起红酒杯轻轻地抿了一小口，对我说：“经常听你说线程池，到底线程池到底是个什么原理？”
- 经典算法（5）杨辉三角
- 杨辉三角 是经典算法，这篇博客对它的算法思想进行了讲解，并有完整的代码实现。
- 使用 Docker 部署 Spring Boot 项目
- Docker 技术发展为微服务落地提供了更加便利的环境，使用 Docker 部署 Spring Boot 其实非常简单，这篇文章我们就来简单学习下。首先构建一个简单的 S...
- 英特尔不为人知的 B 面
- 从 PC 时代至今，众人只知在 CPU、GPU、XPU、制程、工艺等战场中，英特尔在与同行硬件芯片制造商们的竞争中杀出重围，且在不断的成长进化中，成为全球知名的半导体公司。殊不知，在「刚硬」的背后，英特尔「柔性」的软件早已经做到了全方位的支持与支撑，并持续发挥独特的生态价值，推动产业合作共赢。 而对于这一不知人知的 B 面，很多人将其称之为英特尔隐形的翅膀，虽低调，但是影响力却不容小觑。 那么，在...
- 面试官：你连RESTful都不知道我怎么敢要你？
- 干货，2019 RESTful最贱实践
- 刷了几千道算法题，这些我私藏的刷题网站都在这里了！
- 遥想当年，机缘巧合入了 ACM 的坑，周边巨擘林立，从此过上了"天天被虐似死狗"的生活… 然而我是谁，我可是死狗中的战斗鸡，智力不够那刷题来凑，开始了夜以继日哼哧哼哧刷题的日子，从此"读题与提交齐飞， AC 与 WA 一色 "，我惊喜的发现被题虐既刺激又有快感，那一刻我泪流满面。这么好的事儿作为一个正直的人绝不能自己独享，经过激烈的颅内斗争，我决定把我私藏的十几个 T 的，阿不，十几个刷题网...
- 白话阿里巴巴Java开发手册高级篇
- 不久前，阿里巴巴发布了《阿里巴巴Java开发手册》，总结了阿里巴巴内部实际项目开发过程中开发人员应该遵守的研发流程规范，这些流程规范在一定程度上能够保证最终的项目交付质量，通过在时间中总结模式，并推广给广大开发人员，来避免研发人员在实践中容易犯的错误，确保最终在大规模协作的项目中达成既定目标。 无独有偶，笔者去年在公司里负责升级和制定研发流程、设计模板、设计标准、代码标准等规范，并在实际工作中进行...
- SQL-小白最佳入门sql查询一
- 不要偷偷的查询我的个人资料，即使你再喜欢我，也不要这样，真的不好；
- redis分布式锁，面试官请随便问，我都会
- 文章有点长并且绕，先来个图片缓冲下！ 前言 现在的业务场景越来越复杂，使用的架构也就越来越复杂，分布式、高并发已经是业务要求的常态。像腾讯系的不少服务，还有CDN优化、异地多备份等处理。 说到分布式，就必然涉及到分布式锁的概念，如何保证不同机器不同线程的分布式锁同步呢？ 实现要点 互斥性，同一时刻，智能有一个客户端持有锁。 防止死锁发生，如果持有锁的客户端崩溃没有主动释放锁，也要保证锁可以正常释...
- 项目中的if else太多了，该怎么重构？
- 介绍 最近跟着公司的大佬开发了一款IM系统，类似QQ和微信哈，就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
- Nginx 原理和架构
- Nginx 是一个免费的，开源的，高性能的 HTTP 服务器和反向代理，以及 IMAP / POP3 代理服务器。Nginx 以其高性能，稳定性，丰富的功能，简单的配置和低资源消耗而闻名。 Nginx 的整体架构 Nginx 里有一个 master 进程和多个 worker 进程。master 进程并不处理网络请求，主要负责调度工作进程：加载配置、启动工作进程及非停升级。worker 进程负责处...
- “狗屁不通文章生成器”登顶GitHub热榜，分分钟写出万字形式主义大作
- 一、垃圾文字生成器介绍 最近在浏览GitHub的时候，发现了这样一个骨骼清奇的雷人项目，而且热度还特别高。 项目中文名：狗屁不通文章生成器 项目英文名：BullshitGenerator 根据作者的介绍，他是偶尔需要一些中文文字用于GUI开发时测试文本渲染，因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理，所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的： 你发现，...
- 程序员：我终于知道post和get的区别
- 是一个老生常谈的话题，然而随着不断的学习，对于以前的认识有很多误区，所以还是需要不断地总结的，学而时习之，不亦说乎
- 《程序人生》系列-这个程序员只用了20行代码就拿了冠军
- 你知道的越多，你不知道的越多 点赞再看，养成习惯GitHub上已经开源https://github.com/JavaFamily，有一线大厂面试点脑图，欢迎Star和完善 前言 这一期不算《吊打面试官》系列的，所有没前言我直接开始。 絮叨 本来应该是没有这期的，看过我上期的小伙伴应该是知道的嘛，双十一比较忙嘛，要值班又要去帮忙拍摄年会的视频素材，还得搞个程序员一天的Vlog，还要写BU...
- 加快推动区块链技术和产业创新发展，2019可信区块链峰会在京召开
- 11月8日，由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办，科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。 区块链技术被认为是继蒸汽机、电力、互联网之后，下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力，电力解决了人类基本的生活需求，互联网彻底改变了信息传递的方式，区块链作为构造信任的技术有重要的价值。 1...
- Java世界最常用的工具类库
- Apache Commons Apache Commons有很多子项目 Google Guava 参考博客
- 程序员把地府后台管理系统做出来了，还有3.0版本！12月7号最新消息：已在开发中有github地址
- 第一幕：缘起 听说阎王爷要做个生死簿后台管理系统，我们派去了一个程序员…… 996程序员做的梦： 第一场：团队招募 为了应对地府管理危机，阎王打算找“人”开发一套地府后台管理系统，于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好，地府都是满格，哈哈！！！ 经常会有外行朋友问：看某网站做的不错，功能也简单，你帮忙做一下？ 而这次，面对这样的需求，这个程序员...
- 网易云6亿用户音乐推荐算法
- 网易云音乐是音乐爱好者的集聚地，云音乐推荐系统致力于通过 AI 算法的落地，实现用户千人千面的个性化推荐，为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践，以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开： AI算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今，网易云音乐平台持续提供着：乐屏社区、UGC...
- 【技巧总结】位运算装逼指南
- 位算法的效率有多快我就不说，不信你可以去用 10 亿个数据模拟一下，今天给大家讲一讲位运算的一些经典例子。不过，最重要的不是看懂了这些例子就好，而是要在以后多去运用位运算这些技巧，当然，采用位运算，也是可以装逼的，不信，你往下看。我会从最简单的讲起，一道比一道难度递增，不过居然是讲技巧，那么也不会太难，相信你分分钟看懂。 判断奇偶数 判断一个数是基于还是偶数，相信很多人都做过，一般的做法的代码如下...
- 为什么要学数据结构？
- 一、前言 在可视化化程序设计的今天，借助于集成开发环境可以很快地生成程序，程序设计不再是计算机专业人员的专利。很多人认为，只要掌握几种开发工具就可以成为编程高手，其实，这是一种误解。要想成为一个专业的开发人员，至少需要以下三个条件： 1) 能够熟练地选择和设计各种数据结构和算法 2) 至少要能够熟练地掌握一门程序设计语言 3) 熟知所涉及的相关应用领域的知识 其中，后两个条件比较容易实现，而第一个...
- Android 9.0 init 启动流程
- 阅读五分钟，每日十点，和您一起终身学习，这里是程序员Android本篇文章主要介绍Android开发中的部分知识点，通过阅读本篇文章，您将收获以下内容:一、启动流程概述一、 启动流程概述Android启动流程跟Linux启动类似，大致分为如下五个阶段。1.开机上电，加载固化的ROM。2.加载BootLoader，拉起Android OS。3.加载Uboot，初始外设，引导Kernel启动等。...
