MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » 两个div怎的横向排列

两个div怎的横向排列

www.myexceptions.net  网友分享于:2013-04-10  浏览:179次
两个div怎样横向排列?
本帖最后由 whoamiwho 于 2013-03-24 21:07:55 编辑
怎么div2不是在第二行的最左边??

我的页面如下:
  

   <div>
   <div style="width: 100px; height: 100px; float: left">div1</div>
    <label>div1label</label>
   </div>
      <div>
    <div style="width: 100px; height: 100px; float: left">div2</div>
        <label>div2label</label>
      </div>

现在的效果是 
div1 div1label
     div2  div2label
我要的效果是:
div1 div1label
div2 div2label
请问怎么改??

------解决方案--------------------
clear 属性定义了元素的哪边上不允许出现浮动元素,用clear
------解决方案--------------------
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="overflow:hidden;">
<div style="width: 100px; height: 100px; float: left">div1</div>
<label>div1label</label>
</div>
<div>
<div style="width: 100px; height: 100px; float: left">div2</div>
<label>div2label</label>
</div>
</body>
</html>

------解决方案--------------------
出现这种情况,可能是这两个DIV的父元素太小。
------解决方案--------------------
引用:
出现这种情况,可能是这两个DIV的父元素太小。

楼主给出的片段没有问题的。应该给出完整代码。请逐级检查父元素。
------解决方案--------------------


    <div>
        <div style="width: 50px; height: 100px; float: left">
            div1</div>
        <label>
            div1label</label>
    </div>
    <div style="clear: left">
        <div style="width: 50px; height: 100px; float: left" >
            div2</div>
        <label>
            div2label</label>
    </div>



 <div style="clear: left">
这个地方是关键,一定要把上个div的float给clear,否则布局上很容易出现问题
------解决方案--------------------

<div>
   <div style="width: 100px; height: 100px; float: left">
    div1
   </div>
   <label>div1label</label>
   <!--在源代码上加上下面这行就行了-->

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有