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

WBOY
發布: 2016-06-24 12:12:42
原創
1048 人瀏覽過

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

谢谢大家的解答

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板