在一个div中设置左右各一个div布局

在一个div中设置左右各一个div布局

大的DIV中嵌套两个小的DIV一左一右步骤如下：

1，首先，图中显示的Web结构是html和css。

 

 

2，打开html页面，如图所示，定义一个大div和两个小div。

 

 

3，最常用的float float，只要两个小div的宽度小于或等于大div的宽度，就可以并排实现。

 

 

4，使用position进行绝对定位，然后使用margin-left删除第一个小div的宽度。

 

 

5，使用表格框并排实现div，这是相同的宽度。

 

 

6，如图所示，这是上面三种方法运行后的结果，可以看到两个大DIV嵌套在一个大DIV中。

 

 

出处：https://zhidao.baidu.com/question/349729913.html

=======================================================================================

如何在div里面设置左右两个小div模块

学习目标：

如何在一个大的div盒子里面设置左右两边两个小div盒子。

学习内容：

1、 通过flex实现效果 2、 通过浮动实现效果 3、 通过绝对定位实现效果

方法一：

通过flex布局实现： 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过flex布局实现</title>
	</head>
	<body>
	<div class="big_box">
		<div class="left_box">我是左边的盒子</div>
		<div class="right_box">我是右边的盒子</div>
	</div>
	</body>
	<style>
		.big_box{width: 400px;height: 400px;background-color: blue;display: flex;}/* 设置大盒子的布局为flex布局 */
		.left_box{width: 200px;height: 200px;background-color: gold;}
		.right_box{width: 200px;height: 200px;background-color: greenyellow;}
	</style>
</html>
 

效果图：
在这里插入图片描述

方法二：

通过左浮动有浮动来实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过浮动实现</title>
	</head>
	<body>
	<div class="big_box">
		<div class="left_box">我是左边的盒子</div>
		<div class="right_box">我是右边的盒子</div>
	</div>
	</body>
	<style>
		.big_box{width: 400px;height: 400px;background-color: blue;}
		.left_box{width: 200px;height: 200px;background-color: gold;float: left;}/* 左边模块左浮动 */
		.right_box{width: 200px;height: 200px;background-color: greenyellow;float: right;}/* 右边模块右浮动 */
	</style>
</html>
 

（效果图同方法一）

方法三：

通过绝对定位来实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过绝对定位实现</title>
	</head>
	<body>
	<div class="big_box">
		<div class="left_box">我是左边的盒子</div>
		<div class="right_box">我是右边的盒子</div>
	</div>
	</body>
	<style>
		body{padding: 0px;margin: 0px;}/* 先消除游览器本身的边距 */
		.big_box{width: 400px;height: 400px;background-color: blue;}
		.left_box{width: 200px;height: 200px;background-color: gold;display: inline-block;}/* display:inline-block的目的是将对象呈递为内联对象 （div不再占一整行了）*/
		.right_box{width: 200px;height: 200px;background-color: greenyellow;display: inline-block;position: absolute;left: 200px;}/* 通过绝对定位放置div的位置 */
	</style>
</html>
 

（效果图同方法一）

总结：

因为div属于块级元素，所以它默认会占一整行，所以要实现div里面的div左右两边布局需要改变div的样式。目前总结出上文三种比较常用的方法，当然远远不止上面所说的方法，其他的可以在以后慢慢发现。

 

出处：https://blog.csdn.net/big_beer/article/details/115466598

=======================================================================================

DIV 左右布局方案

本文内容大多基于官方文档和网上前辈经验总结，经过个人实践加以整理积累，仅供参考。

实际项目开发过程中遇到页面 DIV 左右布局的需求：左侧 DIV 固定宽度，右侧 DIV 自适应宽度，填充满剩余页面，由此引申出本文的几种解决方案

1 左侧 DIV 设置 float 属性为 left，右侧 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Insert title here</title>
    <style>
      .left {
        float: left;
        width: 300px;
        height: 300px;
        background-color: red;
      }
      .right {
        background-color: orange;
        margin-left: 310px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="left"></div>
    <div class="right"></div>
  </body>
</html>
 

实际效果：

 

 

2 左侧 DIV 设置 float 属性为 left，负边距 100%，右侧 DIV 中嵌套一个 DIV，页面内容放入嵌套的 DIV 中，右侧内嵌 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Insert title here</title>
    <style>
      .left {
        float: left;
        width: 300px;
        height: 300px;
        background-color: gray;
        margin-right: -100%;
      }
      .right {
        float: left;
        width: 100%;
      }
      .right-content {
        height: 300px;
        margin-left: 310px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="left"></div>
    <div class="right">
      <div class="right-content"></div>
    </div>
  </body>
</html>
 

实际效果：

 

 

3 如果将需求修改为右侧固定宽度而左侧自适应宽度

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Insert title here</title>
    <style>
      .left {
        float: left;
        width: 100%;
        height: 300px;
        background-color: blue;
        margin-right: -300px;
      }
      .right {
        float: right;
        width: 300px;
        height: 300px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="left"></div>
    <div class="right"></div>
  </body>
</html>
 

实际效果：

 

出处：https://blog.csdn.net/silent_paladin/article/details/59141773

posted on 2015-06-27 18:50  jack_Meng  阅读(15118)  评论(1)  编辑  收藏  举报

导航