Heim > Artikel > Web-Frontend > 怎样设置在同一行有两个不同的内容_html/css_WEB-ITnose
怎样设置在同一行有两个不同的内容_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:041947Durchsuche
如图，咋在所有内容居中时，又在同一行有不同的内容，如：学院新闻和通知公告两个内容在同一行,请问这如何设置，仅用CSS，不用到js.
回复讨论(解决方案)
每个div设置宽度，然后一个左浮动（float:left），一个右浮动（float:right），就行了
你得了解一下CSS布局：
1. 默认布局（元素从左到右，从上到下排列）；
2. 浮动布局（列布局）
3. 定位布局。
而要解决你提出的问题，就需要用到浮动布局：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style type="text/css"> /* reset */ * { padding: 0; margin: 0;} /* main */ .main {width: 600px; overflow: hidden; background-color: #f1f1f1; margin: 20px auto; } .main-left {float: left; width: 400px; background-color: green; } .main-right {float: right; width: 200px; background-color: blue; } .news { } .notice {}</style></head><body> <div class="main"> <div class="main-left"> <div class="news"> news <br> news <br> news <br> news <br> news <br> news <br> news <br> </div> </div> <div class="main-right"> <div class="notice"> notice <br> notice <br> notice <br> notice <br> notice <br> notice <br> notice <br> </div> </div> </div></body></html> 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
Vorheriger Artikel：网页设计的尺寸_html/css_WEB-ITnoseNächster Artikel：HTML笔记（一）_html/css_WEB-ITnose