左右页面布局

最新推荐文章于 2022-10-20 15:25:41 发布

weixin_34121282

最新推荐文章于 2022-10-20 15:25:41 发布

阅读量128

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/Bryran/p/3957655.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style type="text/css">

#main{
      min-width:850px;
      overflow: hidden;
      padding: 20px 0 0 10px;
      text-align: left;
}

#mainContent
{
    min-height: 200px;
   padding: 0px 0px 10px 0;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-all;
   float: right;
   margin-left: -20em;
   margin-right: 20px;
   display: inline;
   width: 100%;

}
#mainContent .forFlow
{
    margin-left: 20em;
   float: none;
   width: auto;
}
#topics
{
   min-height: 200px;
   margin-bottom: 15px;
   padding: 15px;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-all;
   background: #fff;
   border-radius: 7px;
   box-shadow: 1px 1px 2px #A7A8AD;
   border:1px solid #CCCCCC;
}

#sideBar
{
   width: 230px;
   min-height: 200px;
   padding: 0px 0 0px 5px;
   float: left;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-all;
   border:1px solid #CCCCCC;
}
.newsItem, #blog-calendar {
   margin-bottom: 15px;
   text-indent: 0;
   padding: 10px;
   background: #FAFCFD;
   border-radius: 7px;
   box-shadow: 1px 1px 2px #A7A8AD;
   line-height: 1.5;
}
#blog-news {
   overflow: hidden;
}

</style>

</head>

<body>

<div id="main">

<div id="mainContent">
      <div class="forFlow">
           <div id="topics">
               <div class="post">
                      <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p>
               </div>
           </div>
       </div>
</div>



<div id="sideBar">
      <div id="sideBarMain">
       <div class="newsItem">
           1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>
       </div>
      </div>
   </div>

<div class="clear"></div>

</div>

</body>
</html>

转载于:https://www.cnblogs.com/Bryran/p/3957655.html

weixin_34121282

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左右页面布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt...
复制链接

扫一扫