两个DIV并排显示

今天做的一个项目，需要做3个div，一个是总框（Div1），另外两个是子框，按比例填满div1，我设置好两个div的width和height，发现效果是两个子div上下显示，如图所示：

要想将两个DIV并排显示，需要用到float属性，将div2的float设置为left，将div3的float设置为right，运行就达到了想要的效果

值得一提的是，如果div2和div3的width值相加等于DIV1的width值得话，div2和div3依旧是上下排布而非并列排布

代码示例如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head></head>
  <body>
  <div id="1" style="width:600px;height:300px;border:1px solid #000;">
      <div id="2" style="float:left;width:500px;height:300px;border:1px solid #000;">div2</div>
    <div id="3" style="float:right;width:94px;height:300px;border:1px solid #000;">div3</div>
  </div>
  </body>
</html>

时间： 2024-12-23 02:19:32

两个DIV并排显示的相关文章

让两个DIV并排显示

一.使用display的inline属性 1 <div style="width:300px; height:auto; float:left; display:inline">AAAA</div> 2 <div style="width:300px; height:auto; float:left; display:inline">BBBB</div> 二.通过设置float来让Div并排显示 1 <style

如何让两个div并排同行显示

前段时间在做界面的时候,想要实现个两个DIV并排的界面,做之前想着挺简单的,只要将一个div浮动就可以了.然后就测试了一下.下面是部分代码自己测试代码 <span style="font-size:18px;"><body> <div style="background-color:red;width:200px;">DIV1</div> <div style="background-color:y

（转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）

一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: left;padding: 10px;border: 1px solid red;} 5 #big span {font-size: 24px;font-weight: bold; margin: 0 auto;} 6 </style> 7 <div id="big">

html中怎么样让div并排显示

html中的div默认是流式显示,每个div会占用一整行 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <body> <div>这是第一个显示的div </div>

css两个form不换行，两个div并排代码

1.form不换行通过table布局实现 <table> <tr> <td> <form method="get" action="left.cgi" name="WEBCAM-TEST"><input type=image src="images/left.jpg"/></form> </td> <td> <form met

div+css:两个div并排等高 (table-cell)

两个div并排等高 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .left, 8 .right { 9 display: table-cell; 10 border: 1px solid #f40; 11 } 12 </style> 13 </hea

css实现两个div并排等高（一个div高度随另一个高度变化而变化）

方法一.两个div都设置 display: table-cell; 方法二.父级div设置 display: -webkit-box; 原文地址:https://www.cnblogs.com/baobao0205/p/11620320.html

Html 两个DIV并排的问题

在一个容器内部,要放在两个并排的DIV,两个方法: 1.使用浮动.这个方式div是脱离文档流的,在窗口布局复杂,大小变化的时候,可能会有一些不希望的情况发生. 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Learn to use workerman to chat!</title> 5 <meta charset="utf-8"> 6 <style> 7 .

html设置多个div并排显示

我这里以4个div为例,html代码如下: <body> <div id="column1" style="background-color: blue;float:left;width:25%">a</div> <div id="column2" style="background-color :cyan;float:left;width:25%">b</div>