问题：左右布局时，右边中的子box 的顶部跟左边的最底部对齐

Mybeautiful 2010-08-02 02:41:51

如题：
左右布局时，右边中的 子box 的顶部跟左边的最底部对。

附上简化后的布局代码（展示看到我的布局情况，并不能重现我的问题）





<html >

	<head>

		<title>test page</title>

<style type="text/css">

	

	body {

	margin: 0;

	padding: 0;

	font: 70% 'Lucida Grande', Verdana, Helvetica, sans-serif;

	text-align: center;

	

	border:solid 2px;

}



#wrapper { /* width: 750px; */

	width: 97%;

	margin: 0 auto;

	background-color: #F7F1EB;

	padding: 0 10px 10px 10px;

		text-align: left;

}



#header {

	margin: 10px 15px 15px 15px;

	height: 100px;

	

		border: solid 1px;

}



#left {

	width: 250px;

	margin: 0px 0 0 15px;

	padding: 10px 10px;



	border: solid 1px;

	float: left;



	height:300px;

	

		border: solid 1px;

}



#right {

	margin: 0px 15px 0 295px;

	padding: 10px 10px;

	border: solid 1px;

	

		height:300px;

		width:700px;

}





#left_c{

		margin: 0px 15px 0 0px;

	padding: 10px 10px;

	border: solid 1px;

	

		height:280px;

		width:220px;

}





#right_c{

		margin: 0px 15px 0 0px;

	padding: 10px 10px;

	border: solid 1px;

	

		height:280px;

		width:680px;

}









.clearBoth{

	float:clear;

}



	

	

	</style>

	</head>

	<body>

		<div id="wrapper">



			<div id="header">

             A

				</div>



			<div class="clearBoth"></div>

			<div id="left" >

				    <div id="left_c">

				    	    B

				    	</div>



				</div>



			<div id="right">

				    <div id="right_c">

				    	   C

				    	 </div>

				</div>



		</div>

	</body>

</html>

Box C的顶部可能跟left的最底部对其...

希望我把问题说清楚了，请各位予以解惑..

...全文

90 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

Winter_Sco 2010-08-03

打赏
举报

你的整体页面的宽度若是用百分比的话就都用百分比，左右的宽度你写死了，在不同分辨率下就容易出错，左边把右边挤下去了就，margin: 0px 15px 0 295px;这么大的居左值不出错才怪。你可以参考下下面的代码



<html >

    <head>

        <title>test page</title>

<style type="text/css">

    

    body {

    margin: 0;

    padding: 0;

    font: 70% 'Lucida Grande', Verdana, Helvetica, sans-serif;

    text-align: center;

    

    border:solid 2px;

}



#wrapper { /* width: 750px; */

    width: 97%;

	height:100%;

    margin: 0 auto;

    background-color: #F7F1EB;

    padding: 0 10px 10px 10px;

    text-align: left;

}



#header {

    margin: 10px 0 15px 0;

    height: 100px;

        border: solid 1px;

}



#left {

   width:25%;

	

    padding: 10px 10px;



    border: solid 1px;

    float: left;



    height:300px;

    

        border: solid 1px;

}

#left_c{

    padding: 10px 10px;

    border: solid 1px;

        height:280px;

       

}

#right {

float:right;

    padding: 10px 10px;

    border: solid 1px;    

        height:300px;

        width:68%;

}





#right_c{

    padding: 10px 10px;

    border: solid 1px;

    

        height:280px;

       

}









.clearBoth{

    float:clear;

}



    

    

    </style>

    </head>

    <body>

        <div id="wrapper">



            <div id="header">

             A

                </div>



            <div class="clearBoth"></div>

            <div id="left" >

                    <div id="left_c">

                            B

                        </div>



                </div>



            <div id="right">

                    <div id="right_c">

                           C

                         </div>

                </div>



        </div>

    </body>

</html>