简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

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

WBOY
发布： 2016-06-24 11:45:04
原创
1946 人浏览过


如图，咋在所有内容居中时，又在同一行有不同的内容，如：学院新闻和通知公告两个内容在同一行,请问这如何设置，仅用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>
登录后复制

相关标签：
怎样设置在同一行有两个不同的内容
来源：php.cn
上一篇：网页设计的尺寸_html/css_WEB-ITnose 下一篇：HTML笔记（一）_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
动态修改Javafx中的内联CSS样式 我试图在应用程序最大化时更改窗格的背景图像。我的背景是使用内嵌css设置的。我为样式设置了两个不同的变量和一个if语句。但是，我没有运气让它改变样式。StringcssStyle=...
来自于 2024-04-06 20:57:16
0
1
487
返回（）；不适用于 1 条路线，但适用于几乎相同的路线 我有2条路线，一条用于取消订阅，一条用于恢复，除非我遗漏了某些内容，否则两条路线除了名称/功能/网址之外都是相同的。当我取消恢复订阅时，我单击/resumeurl，它执行该功能，然...
来自于 2024-04-04 17:34:09
0
1
311
使用 Ajax 生成内容 - 滚动到 Id 不起作用 我根据通过ajax获取的数据生成页面内容。我遇到的问题是，当我想滚动到某个ID时，滚动要么不会发生，要么滚动到错误的位置。我一直在查看SO问答，但没有找到任何好的解决方案。很多答案...
来自于 2024-04-04 09:29:39
0
1
397
如何使用CSS选择器来定位包含特定属性或标签的div元素？ 我正在使用一个生成网站的POS系统。大部分代码是专有的，因此我无法编辑很多内容。我有一个输出的类别列表，其中一些图像作为类别浮动。我想隐藏主页上列出的前3个。我尝试使用div:nt...
来自于 2024-04-03 22:25:59
0
1
277
检查查询中的两个值是否相同，使查询非常慢 我的目标：查询，提供正在建设建筑物的所有省份。我的问题：一旦我确保每个建筑物都与同一建筑物进行比较（比较upgrade_id），查询就会永远持续下去。如果没有where语句的最后一...
来自于 2024-04-03 19:06:32
0
1
288
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！