html div 仅一行居中,多个div显示同一行并居中显示(代码附带jquery-hover事件)

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Document

这里是主题-One

这里是主题-Two

这是div1的内容

这是div2的内容

.div_allinline {

text-align: center;

margin: 0 auto;

padding: 0;

clear: both;

}

.dd1

{

margin:0;

padding:0;

display:inline-block;

_display:inline;

*display:inline;

zoom:1;

}

.dd2

{

margin:0;

margin-left: 35px;

padding:0;

display:inline-block;

_display:inline;

*display:inline;

zoom:1;

}

.hh{

border-bottom: 3px solid red;

}

/*.dd1:hover{

border-bottom: 3px solid red;

}*/

//悬浮到 主题1 的div上

$(".dd1").hover(function(){

$(".dd1").addClass("hh");

$(".dd2").removeClass("hh");

$(".ddd1").show();

$(".ddd2").hide();

},function(){

$(".dd1").removeClass("hh");

});

//悬浮到 主题2 的div上

$(".dd2").hover(function(){

$(".dd2").addClass("hh");

$(".dd1").removeClass("hh");

$(".ddd2").show();

$(".ddd1").hide();

},function(){

$(".dd2").removeClass("hh");

});

效果：

默认悬浮主题1和显示内容1

--------------------

悬浮主题1时显示内容1

悬浮主题2时显示内容2