zoukankan      html  css  js  c++  java
  • 左右页面布局

    <!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>

  • 相关阅读:
    SimpleITK学习(二)图像读取
    SimpleITK学习(一)基本概念
    pydicom读取dicom文件报错
    【Python】模拟登录上海西南某高校校园网 (jaccount)
    Leetcode 5
    【C++】枚举类型及其用法
    Leetcode 617 合并二叉树
    【端口转发】如何在外面访问家里的内网计算机?
    Python字典列表字段重组形成新的字典
    Android使用JDBC连接数据库
  • 原文地址:https://www.cnblogs.com/Bryran/p/3957655.html
Copyright © 2011-2022 走看看