• 实现两个div并排的三种方式


      首先说明一下,本人是初学者,只是把自己遇到的一些问题的解决方法做一个记录,方便查阅。

      一直觉得要使2个div并排是一件特别简单的事,不就是float左边的div吗,后来在实际的应用中遇到问题,改了很多遍才,深刻悟出一个道理,看似简单的东西对我来说其实也不简单,还需要多思考。比如按上述说float左边div是可以,但是在我两边div的高度都不可控又要保持同样高度的情况下,就特别麻烦,所以,我自己总结出了3个方法,如果各位还有其它的方法,欢迎多分享

      1.float

        设置好两个div的宽度和高度,在左边div里面加上float:left即可。

      2.margin-left

        给外层div设置一个宽度,设置右边div的高度,然后用margin-left:200px,在左边空出来的200px宽度范围内就可以放左边的div,要把左边div的position设置为absolute.

        如例子:

    <div class="content1">
                <div class="leftDiv1">
                    <p>left</p>                
                </div>
                <div class="rightDiv1">
                    <p>right</p>
                </div>        
    </div>
    

         css如下:

            .content1{
    			1000px;
    			margin:0 auto;
    			background:#FF69B4;
    		}
    		.leftDiv1{
    			position:absolute;;
    			
    		}
    		.rightDiv1{
    			background:#FFC0CB;
    			height:100px;
    			margin-left:200px;
    		}            
    

      效果如下:

     3.Table

        用table来布局,一个tr里面的两个td里面分别放左右两个div,好处就是左右td的高度看起来一样高

  • 相关阅读:
    证券交易买进卖出手续费公式
    iOS学习之 plist文件的读写
    蓝桥杯——基础练习之字母图形
    SNMP协议具体解释
    Android开发框架SmartAndroid2.0 强劲框架
    隐藏快捷方式扩展名(.lnk)
    Filter及FilterChain的使用具体解释
    uva 1393
    深入浅出Windows BATCH
    科大讯飞2014公布会看点二:智能语音装进车载车机!
  • 原文地址:https://www.cnblogs.com/redangel/p/2935333.html
Copyright © 2020-2023  润新知