HTML排版问题

清风随我览江山 2016-10-18 07:09:10



怎样才能做出上面那样的排版呢 ？菜鸟求大神们指导，感激不尽！
...全文
655 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
清风随我览江山 2016-10-31
  • 打赏
  • 举报
 回复
引用 15 楼 WitsonX 的回复:
对了, 你还要再考虑一下1024*768分辨率下会不会变形, DIV会不会掉下来
听了你这么说 我觉得表格好像真的比DIV好用啊 可是为什么网上好多人学习的时候基本上没怎么提表格这个东西呢？ 还有，你说的那些个情况我现在还不知道用div和css怎么处理，但是我觉得既然现在html5是在div 和 css基础上的东西，那div和css应该有他的价值所在吧？ 我会好好看看表格的用法，新手多谢指导！
WitsonX 2016-10-29
  • 打赏
  • 举报
 回复
对了, 你还要再考虑一下1024*768分辨率下会不会变形, DIV会不会掉下来
WitsonX 2016-10-29
  • 打赏
  • 举报
 回复
我问你一下, 如果你用DIV的话, 那div1的内容太多是出滚动条呢, 还是把div2挤下去好呢, 还是被div2盖住好呢 那是出现div 1 2 3 4四个滚动条好呢, 还是自动伸缩好呢 然后你再来考虑一下这些情况怎么写样式, 然后再来考虑一下你的样式是不是兼容IE6 那么 现在你还觉得DIV真的好吗
WitsonX 2016-10-29
  • 打赏
  • 举报
 回复
引用 10 楼 luoqiang_sky 的回复:
[quote=引用 8 楼 WitsonX 的回复:] 我建议用表格, 代码简单, 结构清晰, 兼容性好
新手表示不会用表格 [/quote] 不要老被网络上那些所谓的DIV CSS骗了, 表格是最简单有效, 而且更容易维护, 不易变形 直接画个三行两列的表格, 合并一下单元格
清风随我览江山 2016-10-25
  • 打赏
  • 举报
 回复
引用 11 楼 csdn9_14 的回复:
[quote=引用 9 楼 luoqiang_sky 的回复:] [quote=引用 7 楼 csdn9_14 的回复:] 效果就是这个样子的。
谢谢你拉，揭帖给你满分！ 再请问一下，如何让三个小div横向均匀的分布在一个大div中 ？而且要是响应式的，出来手动调节margin间距还有其他的办法吗？ 另外，间距可以做到自适应吗？谢谢！[/quote] 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
	*{margin:0;padding:0}
	.div4{width:600px;height:300px;margin:100px auto;border:5px solid black;}
	.content{margin:50px 20px;width:600px;height:200px;}
	.div1{width:150px;height:100px;border:5px solid black;margin:10px;float:left;}
	.div2{width:150px;height:100px;border:5px solid black;margin:10px;float:left;}
	.div3{width:150px;height:100px;border:5px solid black;margin:10px;float:left;}
</style>
</head>	
	
<body>
	<div class="div4">div4
    	<div class="content">
            <div class="div1">div1</div>
            <div class="div2">div2</div>
            <div class="div3">div3</div>
        </div>
    </div>
</body>
</html>
这个可以做到那个效果，但是你说的响应式的貌似我不太会。那个需要用到media screen吧，我不太会那个。[/quote] 谢谢啦~ 做成响应式把像素换成百分比就可以了。
俊刚、 2016-10-22
  • 打赏
  • 举报
 回复
引用 9 楼 luoqiang_sky 的回复:
[quote=引用 7 楼 csdn9_14 的回复:] 效果就是这个样子的。
谢谢你拉，揭帖给你满分！ 再请问一下，如何让三个小div横向均匀的分布在一个大div中 ？而且要是响应式的，出来手动调节margin间距还有其他的办法吗？ 另外，间距可以做到自适应吗？谢谢！[/quote] 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
	*{margin:0;padding:0}
	.div4{width:600px;height:300px;margin:100px auto;border:5px solid black;}
	.content{margin:50px 20px;width:600px;height:200px;}
	.div1{width:150px;height:100px;border:5px solid black;margin:10px;float:left;}
	.div2{width:150px;height:100px;border:5px solid black;margin:10px;float:left;}
	.div3{width:150px;height:100px;border:5px solid black;margin:10px;float:left;}
</style>
</head>	
	
<body>
	<div class="div4">div4
    	<div class="content">
            <div class="div1">div1</div>
            <div class="div2">div2</div>
            <div class="div3">div3</div>
        </div>
    </div>
</body>
</html>
这个可以做到那个效果，但是你说的响应式的貌似我不太会。那个需要用到media screen吧，我不太会那个。
清风随我览江山 2016-10-22
  • 打赏
  • 举报
 回复
引用 8 楼 WitsonX 的回复:
我建议用表格, 代码简单, 结构清晰, 兼容性好
新手表示不会用表格
清风随我览江山 2016-10-22
  • 打赏
  • 举报
 回复
引用 7 楼 csdn9_14 的回复:


效果就是这个样子的。


谢谢你拉，揭帖给你满分！
再请问一下，如何让三个小div横向均匀的分布在一个大div中 ？而且要是响应式的，出来手动调节margin间距还有其他的办法吗？
另外，间距可以做到自适应吗？谢谢！
WitsonX 2016-10-21
  • 打赏
  • 举报
 回复
我建议用表格, 代码简单, 结构清晰, 兼容性好
清风随我览江山 2016-10-19
  • 打赏
  • 举报
 回复
引用 3 楼 qq_29594393 的回复:
确定可以我截个图给你看一下吧
屌
俊刚、 2016-10-19
  • 打赏
  • 举报
 回复


效果就是这个样子的。
俊刚、 2016-10-19
  • 打赏
  • 举报
 回复 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
	*{margin:0;padding:0}
	.content{margin:100px auto;padding:5px;width:400px;height:400px;border:1px solid black;}
	.right{float:right;}
	.div1{width:220px;height:120px;border:1px solid black;margin:5px;}
	.div2{width:220px;height:120px;border:1px solid green;margin:5px;}
	.div3{width:220px;height:120px;border:1px solid blue;margin:5px;}
	.div4{width:150px;height:380px;border:1px solid red;float:left;}
</style>
</head>
	
<body>
<div class="content">
	<div class="right">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
    </div>
    <div class="div4">div4</div>
</div>
</body>
</html>
可以试下这个，有什么改进可以告诉我。。
Vision_A 2016-10-19
  • 打赏
  • 举报
 回复
根据楼上的 再加个border就可以了
当作看不见 2016-10-18
  • 打赏
  • 举报
 回复
确定可以我截个图给你看一下吧
清风随我览江山 2016-10-18
  • 打赏
  • 举报
 回复
引用 1 楼 qq_29594393 的回复:
大概就这样 

<style>
div{display: inline-block;}
.div1{width: 48%;height: 500px;background-color: #1B6D85;float: left;}
.div2{width: 100%;height: 166px;background-color: #398439;}
#div{width:70%;margin:0 15% auto;}
</style>
<div id="div">
	<div class="div1">1</div>
	<div class="div1">
		<div class="div2">2</div>
		<div class="div2">3</div>
		<div class="div2">4</div>
	</div>
</div>
不行啊 大哥 ~~~~~~~~你确定可以吗
当作看不见 2016-10-18
  • 打赏
  • 举报
 回复
大概就这样 

<style>
div{display: inline-block;}
.div1{width: 48%;height: 500px;background-color: #1B6D85;float: left;}
.div2{width: 100%;height: 166px;background-color: #398439;}
#div{width:70%;margin:0 15% auto;}
</style>
<div id="div">
	<div class="div1">1</div>
	<div class="div1">
		<div class="div2">2</div>
		<div class="div2">3</div>
		<div class="div2">4</div>
	</div>
</div>
sublime插件tag
在sublime2的安装目录下新建Data文件夹，在Data文件夹下新建Packages文件夹，在Packages下放入tag。重启即可。
html 一键排版,用一键排版 排版好轻松
很多人在写文章的时候，并不注意文章的排版格式，等到几千字的文章写完以后，发现非常的杂乱，本来写文章就很费精力，如果重新排版总会觉得很烦;如果你是新闻编辑人员，每天对着N多的新闻，肯定厌倦了每篇文章的排版工作，如果有那么一款软件，它可以帮助你自动的排版，且非常的省时省力，我想应该不会有人拒绝的。下面我们就来看看这款自动排版的软件“一键排版”;软件安装：“一键排版”安装过程很简单，只需按默认设置几步完...
HTML多个视频的排版问题
使用HTML同时播放多个视频，需要将视频进行排版，使得界面美观。 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"/> <title>路口行人车辆监测系统</title> </head> <style> body{ background: #000;
html图片与文字的排版6,HTML文字与排版
HTML文字遇新是直朋能到分览与排版段落效果——遇新是直朋能到分览支体调使用排版标记< p > 标记:用来分出段落，成对出现。< br > 标记:用来换行，没有结尾标记。建议使用：< br / >< pre > 标记:成对出现，开始标记与结尾标记之间的文字按照原始代码的排列方式进行显示。< blockquote > 标记:成对出现，表示引...
IntelliJ Idea及其同系列产品解决网页查看源码Html排版样式乱了
这个问题解决的是一个工具进行几个步骤设置就能解决的了，webStorm ,phpstorm解决网页查看源码Html排版样式乱了一样是这家公司的产品，也可以参照一下步骤设置，即可解决问题 浏览器查看网页源码时候，排版样式并不是在编辑器看到的那种排版 问题如下 Idea设置如下就可以了 File - Line Separators - CRLF-Windows(\r\n) 如果是php和其他的编辑工具如果是这家公司的，也是这么设置 ...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章