Heim >Web-Frontend >HTML-Tutorial >请教大家一个CSS排版问题_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:12:421062Durchsuche

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

谢谢大家的解答

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn