两个div水平排列

悠悠 2021-09-28 03:40 368阅读 0赞

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    .div1{
    	
    	width:50%;
    	height:100px;
    	background-color:#0C0;
    	display:inline-block;
    }
    .div2{
    	
    	width:50%;
    	height:100px;
    	background-color:#aaa;
    	display:inline-block;
    }
    </style>
    </head>
    <body>
    	<div class="div1">
        left
        </div><div class="div2">
        right
        </div>
    </body>
    </html>

效果：

![20190124111237759.png][]

总结：上面是通过display:inline来解决的，另外还可使用float来解决;

如果想要div中的内容居中，可使用padding来实现

参考：[https://blog.csdn.net/aitangyong/article/details/42775803][https_blog.csdn.net_aitangyong_article_details_42775803]

[20190124111237759.png]: /images/20210923/747b77a82b554d86bcaafd8ffaaca7a4.png
[https_blog.csdn.net_aitangyong_article_details_42775803]: https://blog.csdn.net/aitangyong/article/details/42775803

发表评论取消回复

表情：

评论列表（有 0 条评论，368人围观）

还没有评论，来说两句吧...

相关阅读

相关 div 水平垂直居中

<div class="parent"> <div class="child"></div> </div> 1、 div.pare

小鱼儿/ 2023年10月12日 08:11/ 0 赞/ 25 阅读

相关 DIVs水平垂直居中

.login-container { height: 260px; margin: 0 auto; /水平居中/ margin-top:

迈不过友情╰/ 2023年07月07日 03:37/ 0 赞/ 18 阅读

相关 div水平垂直居中

一、水平居中： 1、div盒子水平居中：比较容易，直接设置div元素的margin: 0 auto就可以实现。 2、div里面的内容水平居中：text-align:cent

朴灿烈づ我的快乐病毒、/ 2022年12月07日 01:14/ 0 赞/ 295 阅读

相关 div水平垂直居中

.main\{width:960px;height:658px;position:absolute;top:50%;left:50%;margin-top:-329px;mar

向右看齐/ 2022年08月23日 12:47/ 0 赞/ 315 阅读

相关两个div并列

div是块级元素，是独占一行的，一般情况下，两个相邻的div是不会处于一行的。（1）使用float div \{ float : lef

╰+哭是因爲堅強的太久メ/ 2022年06月08日 09:18/ 0 赞/ 211 阅读

相关 div内部元素水平，垂直居中，多div水平排列

html: <!DOCTYPE html> <html> <head> <script src="https://code.jquery.c

叁歲伎倆/ 2022年05月17日 09:04/ 0 赞/ 250 阅读

相关设置多个div横向排列

<div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class

亦凉/ 2022年04月17日 01:55/ 0 赞/ 310 阅读

相关两个DIV平行存放

<style> div \{display:block; width:80px; height:22px; float:left;\} div.L \{border-r

小鱼儿/ 2022年04月01日 13:50/ 0 赞/ 227 阅读

相关两个div水平排列

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding

悠悠/ 2021年09月28日 03:40/ 0 赞/ 369 阅读

相关多个div在一个div中一行水平显示

1.使用 inline-block .an{ display: inline-block; }

小鱼儿/ 2021年09月27日 11:26/ 0 赞/ 391 阅读