请教大家一个CSS排版问题_html/css_WEB-ITnose-html教程-PHP中文网

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

WBOY

发布： 2016-06-24 12:12:42

原创

1078 人浏览过

<?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;
  ……
}
浮动。宽，高设置合理就可以了

谢谢大家的解答