首页 >web前端 >html教程 >请教大家一个CSS排版问题_html/css_WEB-ITnose

请教大家一个CSS排版问题_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 12:12:421065浏览

<?php	include_once("top.php");?><style>.mainflame{	margin-top:10px;	width:951px;	height:900px;	margin-left:auto;	margin-right:auto;	}.mainflame_service{	border:2px solid #c7e0f4;		background:#edf5fc;	width:185px;	height:235px;	padding-top:5px;	padding-left:5px;}.mainflame_service_img_fuwu{	background:url(img/youxi171fuwu.jpg);	width:180px;	height:42px;}.mainflame_service_line{	width:180px;	height:0px;	border:1px solid #c7e0f4;		}.mainflame_service_textlist{	padding-bottom:5px;	padding-top:5px;	width:180px;	font-size:12px;	border-bottom:1px solid #dcedfb;	}.mainflame_ad{	padding-bottom:5px;	padding-top:5px;	width:515px;	height:180px;	font-size:12px;	border:1px solid #dcedfb;	}</style><div class="mainflame">	<div class="mainflame_service">    	<div class="mainflame_service_img_fuwu">        </div>        <div class="mainflame_service_line">        </div>        <div class="mainflame_service_textlist">        <a href="#">游戏币</a></div>        <div class="mainflame_service_textlist">        游戏币        </div>        <div class="mainflame_service_textlist">        游戏装备        </div>        <div class="mainflame_service_textlist">        游戏点卡        </div>        <div class="mainflame_service_textlist">        账号交易        </div>        <div class="mainflame_service_textlist">        常见问题        </div>        <div class="mainflame_service_textlist">        客服中心        </div>                                                          </div>  <div class="mainflame_ad">  </div></div><?php	include_once("bottom.php");?>


我一直没搞明白为什么mainflame_ad这个框框换行了, 按理来说mainflame_ad加上mainflame_service的宽度没有超过mainflame宽度不就不会换行的吗?

请问一下要怎么才能让他们都在同一行,并且在mainflame中靠左,置顶?


回复讨论(解决方案)

.mainflame_ad{  float:left;  ……}

因为块元素一行只能放一个,除非改display或者设置浮动:

.mainflame{
overflow:hidden;
        margin-top:10px;
    width:951px;
    height:900px;
    margin-left:auto;
    margin-right:auto;    
}

.mainflame_service{
    border:2px solid #c7e0f4;    
    background:#edf5fc;
    width:185px;
    height:235px;
    padding-top:5px;
    padding-left:5px;
        float:left;
}.mainflame_ad{
float:right;
    padding-bottom:5px;
    padding-top:5px;
    width:515px;
    height:180px;
    font-size:12px;
    border:1px solid #dcedfb;    
}

.mainflame_service{  float:left;  ……}.mainflame_ad{  float:left;  ……}


这样两个模块就是在同一个流上,前面只有有空,它就会靠过去。

[Quote=引用 3 楼  的回复:]
CSS code
.mainflame_service{
  float:left;
  ……
}
浮动。宽,高设置合理就可以了

谢谢大家的解答

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn