请教大家一个CSS排版问题_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");?>
我一直没搞明白为什么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;
……
}
浮动。宽,高设置合理就可以了
谢谢大家的解答

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

本文讨论了视口元标签,这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互,而滥用可能会导致设计和可访问性问题。

本文讨论了&lt; iframe&gt;将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
