I would like to ask you a question about CSS layout_html/css_WEB-ITnose

<?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");?>

I have never understood why the mainflame_ad frame wraps. Logically speaking, if the width of mainflame_ad plus mainflame_service does not exceed the width of mainflame, won't it not wrap?

Please tell me how to make them all on the same line, and to the left and top of the mainflame?

Reply to the discussion (solution)

.mainflame_ad{  float:left;  ……}

Because only one block element can be placed in a row unless the display or settings are changed Float:

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

.mainflame_service{
border:2px solid #c7e0f4; x;
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;  ……}

In this way, the two modules are on the same stream. If there is space in front, it will move closer.

[Quote=Quote 3rd floor’s reply:]

CSS code

.mainflame_service{
float:left;
…
}
Float. Just set the width and height appropriately

Thank you for your answers