• 左右页面布局


    <!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-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;
         100%;
        
      }
      #mainContent .forFlow
      {
        margin-left: 20em;
        float: none;
         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
      {
         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">
      <!--begin: mainContent -->
      <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>
     <!--end: mainContent-->
     
      <!--begin: sideBar 侧边栏容器 -->
      <div id="sideBar">
          <div id="sideBarMain">
             <div class="newsItem">
                1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>
             </div>
          </div>
       </div>
      <!--end: sideBar 侧边栏容器 -->
      <div class="clear"></div>
       
    </div>

    </body>
    </html>

  • 相关阅读:
    WampServer软件
    ASP.NET Core中返回 json 数据首字母大小写问题
    区块链的入门与应用(1)
    阿里云oss 的坑==》 路径有区分大小写
    uni-app 学习笔记 小于号问题
    uni-app 学习笔记-引用外部js并调用
    net core 简单读取json配置文件
    net core 3 使用 autofac
    js 获取对应的url参数
    postman 跟restsharp 模拟请求http
  • 原文地址:https://www.cnblogs.com/Bryran/p/3957655.html
Copyright © 2020-2023  润新知