两个div怎的横向排列-HTML教程-爱易网页

两个div怎的横向排列

日期：2014-05-17　浏览次数：20979 次

两个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>

   <!--在源代码上加上下面这行就行了-->

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

两个div怎的横向排列

相关资料更多>

推荐阅读更多>