怎样设置在同一行有两个不同的内容_html/css_WEB-ITnose

如图,咋在所有内容居中时,又在同一行有不同的内容,如:学院新闻和通知公告两个内容在同一行,请问这如何设置,仅用CSS,不用到js.

回复讨论(解决方案)

每个div设置宽度,然后一个左浮动(float:left),一个右浮动(float:right),就行了

你得了解一下CSS布局:
1. 默认布局(元素从左到右,从上到下排列);
2. 浮动布局(列布局)
3. 定位布局。

而要解决你提出的问题,就需要用到浮动布局:

nbsp;html>        Document        /* 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 {}        
                
            
                news 
                news 
                news 
                news 
                news 
                news 
                news 
            
        
        
            
                notice 
                notice 
                notice 
                notice 
                notice 
                notice 
                notice 
            
        
    

登录后复制

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3102218.html

(0)
上一篇 2025年3月29日 07:29:46
下一篇 2025年3月29日 07:29:55

AD推荐 黄金广告位招租... 更多推荐

发表回复

登录后才能评论