和讯博客首页模块两栏排列的实现代码

最近一些朋友都问一个问题，如何让个人门户模块像博客一样成两列显示，具体效果请参考

在这里做个简单介绍，希望对有这方面打算的朋友有所帮助。看看步骤：

1.登陆到个人门户，在个人门户设置中选择模块选择，然后在右边选择自定义CSS。

2.请如下面找到紫色部分，按红色的提示修改（需修改的有两处）

#left_side {
width: 204px;
}
.left_side_2 {
width: 204px;
}
.left_side_3 {
width: 204px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #E4E4E4;
}

#left_side #left_side_inner .side_block .substance .substance_list .Slist .Slist_2 {
visibility: hidden;
}
#left_side #left_side_inner .side_block .substance .Slist .Slist_2 {
visibility: hidden;
}
#left_side #left_side_inner .side_block #AudioDivItem .music_boder {
width: 160px;
}
#left_side #left_side_inner .side_block #AudioDivItem object {
height: 64px;
width: 182px;
}
#left_side #left_side_inner .side_block #Board .message .message_list {
width: 182px;
}
#left_side #left_side_inner .side_block #Board .release .release_2 input {
width: 120px;
}
#left_side #left_side_inner .side_block #Board .release .release_2 textarea {
width: 120px;
}
#left_side #left_side_inner .side_block #Board .message .message_list .message_list_right .message_list_right_text {
height: 66px;
}
#left_side #left_side_inner .side_block #VideoDivItem object {
width: 182px;
}
#left_side #left_side_inner .side_block #MyFriend {
height:auto;
width:182px;
}
#left_side #left_side_inner .side_block #MyFriend div {
margin-left:5px;
margin-right:5px;
margin-top:5px;
}

.list {
line-height: 20px;
height: 20px;
}
.list_1 {
float: left;
}
.list_2 {
float: right;
}
#main {
width: 528px; /*将此处的528修改为728*/
}
#main_inner {
width: 508px; /*将此处的508改为718*/
padding-right: 10px;
padding-left: 10px;
}
#master_ptoto {
text-align: center;
}
#master_ptoto_1 {
padding-top: 8px;
padding-bottom: 8px;
}
#master_ptoto_2 {
line-height: 18px;
}
#main #main_inner .side_block #Board .release .release_2 input {
width: 422px;
}
#main #main_inner .side_block #Board .release .release_2 textarea {
width: 422px;
}
#main #main_inner .side_block #AudioDivItem object {
height: 64px;
width: 450px;
}
#main #main_inner .side_block #AudioDivItem .music_boder {
width: 428px;
}
#main #main_inner .side_block #Board .message .message_list {
width: 486px;
}
#main #main_inner .side_block #VideoDivItem object {
width: 450px;
height: 360px;
}
#main #main_inner .side_block #VideoDivItem .music_boder {
width: 428px;
}
#main #main_inner .side_block #MyFriend {
height: 200px;
}
#main #main_inner .side_block #MyFriend div {
margin-left:11px;
margin-right:5px;
margin-top:5px;

}
#MyFriend {
text-align: center ;
}
#MyFriend div {
float:left;
}
#MyFriend span {
display:block;
height: 22px;
width: 75px;
overflow: hidden;

}
#MyFriend img {
height: 75px;
width: 75px;
}
#AudioDivItem {
text-align: center;
}
.music_list {
margin-top: 10px;
}
.music_boder {
border: 1px solid #CECECE;
text-align: left;
padding: 10px;
}
.music_boder_1 span,.music_boder_2 span {
font-weight: bold;
}
.message_list {
border-bottom-width: 1px;
border-bottom-style: dashed;
margin-bottom: 7px;
border-bottom-color: #CECECE;
}
.message_list_left {
width: 60px;
height: 62px;
text-align: center;
margin: 0px;
}
.message_list_left_1 {
height: 40px;
}
.message_list_left_2 {
height: 22px;
}
.message_list_right {
}
.message_list_right div {
padding-left: 10px;
}
.more {
float: right;
padding-right: 10px;
}
.MusicNameList {
width: 100%;
text-align: center;
line-height: 28px;
color: #999999;
}
.MusicNameList tr {
background-image: url(http://hexun.com/img/img_style000/vi_01.gif);
background-repeat: repeat-x;
background-position: bottom;
}
.MusicNameList div {
background-image: url(http://hexun.com/img/img_style000/vi_10.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
.MusicNameListTitle {
color: #494949;
}

.Music_Item_B {
height: 95px;
}
.Music_Item_B_1 {
float: left;
}
.Music_Item_B_1 img {
margin: 10px;
height: 75px;
width: 75px;
}
.Music_Item_B_2 {
margin-top: 8px;
}
.Music_Item_B_2 div {
height: 20px;
line-height: 20px;
}

#MusicPlayerID {
width: 100%;
}
#MusicPlayerID td {
padding-top: 12px;
padding-bottom: 12px;
line-height: 22px;
}

.MusicPlayerTd_1 div {
padding-right: 10px;
padding-left: 10px;
}
.MusicPlayerTd_1_2 object {
height: 64px;
width: 500px;
}
.MusicPlayerTd_2 div {
height: 22px;
margin-left: 10px;
}
.MusicPlayerTd_3 div {
padding-right: 10px;
padding-left: 10px;
}

#MusicPlayerID .MusicPlayerTd_1 {
width: 530px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CCCCCC;
}
#MusicPlayerID .MusicPlayerTd_2 {
border-left-width: 1px;
border-left-style: dashed;
border-left-color: #CCCCCC;
width: 189px;
}
.MusicPlayerTd_3_3 {
margin-top: 10px;
}

未完，请看下一页。