> 웹 프론트엔드 > HTML 튜토리얼 > 请教大家一个CSS排版问题_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 12:12:42
원래의
1066명이 탐색했습니다.

<?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으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿