div的两列居中放置

最新推荐文章于 2021-06-07 14:15:47 发布
最新推荐文章于 2021-06-07 14:15:47 发布
阅读量763 收藏
点赞数
分类专栏： html和css 文章标签： HTML div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mingtian369/article/details/9944883
版权

以下代码实现一个大的div id=content包含两个左右结构的div，id=side和id= main  并居中放置。并对每个div设计了css样式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
#side {
background-color: #00CC66;
float: left;
height: 300px;
width: 120px;
}
#main {
background-color: #CC6633;
height: 300px;
width: 70px;
margin-left:122px;
}
#content {
width: 470px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
 
<div id="content">
  <div id="side">此处显示  id "layout" 的内容</div>
  <div id ="main">cichu</div>
</div>
</body>
</html>

mingtian369
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div中嵌套html页面,如何在div中嵌套div
weixin_39687359的博客
06-04 7028
请问如何在一个大的div里横向嵌套两个小的div我嵌套的div会换行，没有办法两个并排在一起 因为照着书上做的，所以使Test $(function(){ }); 此处显示 id "rightmain" 的内容 此处显示 id "nav" 的内容 加了float:left,这样就并排了。float:left指都靠左边浮动。一个大的DIV中嵌套两个小的DIV一左一右这是代码.max { width:...
div的两列居中放置并对每个div设计css样式
09-25
一个大的div id=content包含两个左右结构的div，id=side和id= main 并居中放置，下面是具体的示例代码，感兴趣的朋友可以参考下
DIV布局 两列固定宽度居中
网站开发初中级代码参考-转载
05-19 196
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
两列布局的自动宽度以及DIV水平居中
{ focus : web }
10-20 211
两列布局的自动宽度     &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt...
html 两列文字居中显示,html – 如何使用CSS将两列居中？
weixin_30529023的博客
06-07 272
我试图在我的网站上设置两列,但存在一些问题.每次更改的结果都是左侧位置(见picture).我究竟做错了什么？这是我的CSS：body {background - image: url("../img/gray.png");}#header {position: absolute;top: 0;left: 0;right: 0;height: 100px;background: #cc0000;t...
两侧列固定中间列变宽Div布局示例
09-25
- `#innerContainer`：内部容器，用于放置内容，其背景图片`images/background-left.gif`在左侧进行重复填充。 - `#navi`：定义左侧的侧边栏，宽度固定为200像素，绝对定位在左上角。这里包含了一个导航菜单。 - `...
用DIV+CSS实现国内经典式三行两列布局
05-18
### 用DIV+CSS实现国内经典式三行两列布局 #### 布局概述 在Web设计领域，有一种常见的布局方式被称为“三行两列”布局，这种布局广泛应用于企业站点和其他展示类网站中。典型的特征包括：顶部通常放置大型导航栏...
CSS教程：三列固定网页布局实例
09-27
2. `<div id="topbar">`：用于放置logo或顶栏内容，可以自定义高度。 3. `<div id="navbar">`：导航栏，包含了链接，如首页、关于和联系页面。 4. `<div id="main">`：主要内容区域，内部包含了三个子元素：左侧列、...
DIV＋CSS＋HTML布局（三行两列布局）
05-17
DIV＋CSS＋HTML布局（三行两列布局）
HTML中如何对DIV使用列布局（两列三列等）
lu18225857116的博客
11-08 1万+
1.没使用浮动（float）效果时是  div之间是上下布局 2.使用浮动（float）进行布局时，像左边布局，margin-left为最距外边距的那段距离 #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; w
【css】css实现div两列布局（固定和自适应）（两种方法）
金金的博客
08-19 9140
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法） 1.实现目标 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2、思路 1、让两个div并排到一行 div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； 2、一个div宽度固定，另一个div自适应剩下的宽度 对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动计算后让它占一行，接下来给他设置margin-left属
CSS主流布局--居中布局（垂直+水平）、两列、三列
weixin_44028804的博客
02-20 2041
主流布局–居中布局（垂直+水平）、两列、三列 居中布局的实现方式 第一种实现方式：table+margin实现水平方向上的居中，table-cell+vertical-align实现垂直方向上的居中 第二种实现方式：absolute+transform实现水平方向和垂直方向上的居中 第一种实现方式 table+margin实现水平居中，table-cell+vertical-align实现垂直居中...
前端页面布局中水平、垂直居中问题
weixin_30377461的博客
07-24 224
前言 两年前工作时开的博客，一年前写了两篇博文，然后就到了现在才重拾起笔。原因有二，一是自觉技术不足，二曰懒。 　　最近由于在项目中遇到需求为拖动列可调整列顺序的表格，最后找到一款基于JQuery名为DataTables的插件，但网上为之写使用方法的很少，质量也很差，所以就动了为之写一个较为全面的使用方法的文章，又由于最近项目工作繁忙，所以一周过去了还没有写，今天抽空写了这篇文章，至于那个插件...
css实现水平垂直居中、两列布局、三列居中布局，两列等高
Handsome2013的博客
10-07 3463
水平居中 行内元素 首先看它的父元素是不是块级元素，如果是，则直接给父元素设置text-align: center; <style> #father { width: 500px; height: 300px; background-color: skyblue; text-align: center; } </style> <div id="father"> <span id="son">我是行内元素</...
CSS如何让两个DIV并排居中
热门推荐
夜曲的博客
07-24 1万+
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head&...
div中图片居中放置
最新发布
07-28
要将图片在`div`中居中放置，可以使用CSS来实现。有几种方法可以实现这个效果，以下是其中两种常见的方法： 方法一：使用`text-align`和`vertical-align`属性 HTML: ```html <div class="container"> <img src="your-image.jpg" alt="Your Image"> </div> ``` CSS: ```css .container { text-align: center; height: 300px; /* 设置高度以便垂直居中 */ line-height: 300px; /* 设置行高以便垂直居中 */ } .container img { vertical-align: middle; } ``` 方法二：使用Flexbox布局 HTML: ```html <div class="container"> <img src="your-image.jpg" alt="Your Image"> </div> ``` CSS: ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 300px; /* 设置高度以便垂直居中 */ } ``` 这些方法都会将图片水平和垂直居中放置在`div`中。您可以根据需要选择其中的一种方法，并根据实际情况调整样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值