正文
divcss新闻栏目 css新闻列表
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
使用DIV+CSS布局遇到的问题，新闻列表的标题和时间分开
您好，您可以这么做 ；
div
ul
lispan2012-03-30/span问题简单解决了，对吧！/li
/ul
/div
如上面所写，把span标签里面放前面，然后float:right，这样就可以了！
试试看吧！！
相关问答
Q1: 这新闻咨讯文字左边的图标和最右边的图标，用DIV+CSS怎么排版
style
.main{ width:500px; height:500px; border:1px solid #000;}
/style
div class="main"
img src="aaa.png" style="float:left;"/
文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域/p
/div
你把src="aaa.png"这个图片地址换成你自己的吧，这个是我自己测试用的一个地址；已经实现了你说的效果；你复制粘贴一下看看效果吧；
Q2: 我想用div+css写一个新闻一样的模块，怎么在标题栏不变，点击只改变内容
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleA simple Tab Test/title
style type="text/css"
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: #333;
pointer-events: none;
}
.container{
margin: 20px auto;
padding: 20px;
border:1px dashed #ddd;
width: 600px;
}
.container ulli{
list-style: none;
}
.container ul{
border: 1px solid #ddd;
display: table-cell;
}
.menu{
width: 200px;
}
.content{
width: 400px;
}
.menuli{
height: 32px;
padding: 6px 12px;
}
li:not(:last-child){
border-bottom: 1px solid #ddd;
}
.contentli{
border-width: 0;
padding: 6px 12px;
display: none;
}
.active{
background: darkcyan;
color: #f2f2f2;
}
.contentli.show{
display: block;
height: 100%;
}
/style
script type="text/javascript"
onload = function(){
var get = function(selector){
var multiple = document.querySelectorAll(selector);
return multiple.length===1 ? document.querySelector(selector) : multiple;
};
var menu = get('.menu'),content = get('.content'),menuLi = get('.menuli'),contentLi = get('.contentli');
var getIndex = function(elements,element){
var arr = Array.prototype.slice.call(elements,0);
for(var i = arr.length-1;i-1;i--){
if(arr[i] === element){
return i;
}
}
return -1;
};
var defaultMenu = get('li.active'),defaultContent=get('li.show');
menu.addEventListener('click', function(e){
if(e.target.tagName.toUpperCase() ==='LI') {
if (defaultMenu defaultContent) {
defaultMenu.classList.remove('active');
defaultContent.classList.remove('show');
}
defaultMenu = e.target;
defaultMenu.classList.add('active');
var index = getIndex(menuLi,defaultMenu);
defaultContent = contentLi.item(index);
defaultContent.classList.add('show')
}
},false)
}
/script
/head
body
div class="container"
ul class="menu"
li class="active"a href="javascript:void(0)"menu1/a /li
lia href="javascript:void(0)"menu2/a /li
lia href="javascript:void(0)"menu3/a /li
/ul
ul class="content"
li class="show"pcontent1/p /li
lipcontent2/p /li
lipcontent3/p /li
/ul
/div
/body
/html
关于divcss新闻栏目和css新闻列表的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
