zoukankan      html  css  js  c++  java
  • 在HTML中实现两个div并排显示

    在HTML中让两个div并排显示,通常情况下有三种实现方式,包括:

    (1)设置为行内样式,display:inline-block

    (2)设置float浮动

    (3)设置position定位属性为absolute

    以下为三种方式的具体实现代码:

    个人觉得float浮动方式比较好用。

    1、设置每个div的展现属性为行内样式,示例代码为:

    <div class="app">

    <div style="display:inline-block;background:#f00;">div1</div>

    <div style="display:inline-block;background:#0f0;margin-left:10px;">div2</div>

    </div>

    2、设置float浮动,示例代码为:

    <div class="app">

    <div style="float:left;background:#f00;">div1</div>

    <div style="float:left;background:#0f0;margin-left:10px;">div2</div>

    </div>

    3、设置position定位属性为absolute, 示例代码为:

    <div class="app">

    <div style="position: absolute;100px;background:#f00;">div1</div>

    <div style="position: absolute;left:100px;background:#0f0;margin-left:10px;">div2</div>

    </div>

  • 相关阅读:
    4.7字符串
    4.5 基本类型和运算符
    4.4 变量
    4.6 字符串
    hp
    openstack newton linuxbridge 改成 ovs
    理解裸机部署过程ironic
    csredis base usage
    redisclient can not connect
    Linux Install redis
  • 原文地址:https://www.cnblogs.com/ming-4/p/11556028.html
Copyright © 2011-2022 走看看