zoukankan      html  css  js  c++  java
  • div如何实现左右两个panel并排,而且高度一致

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
    
    <!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 runat="server">
        <title></title>
        <script src="jquery-1.3.2-vsdoc.js"></script>
        <script type="text/javascript">
            $(function() {
                var div1 = $("#left");
                var div2 = $("#right");
    
                var h = GetMaxHeight(div1, div2);
                div1.css("height", h);
                div2.css("height", h);
                
            });
    
    
            function GetMaxHeight(div1, div2) {
                var h1 = $(div1).attr("offsetHeight");
                var h2 = $(div2).attr("offsetHeight");
    
                return Math.max(h1, h2);
            }
            
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="list" style="border: solid 1px #999;">
            <div id="left" style="border: 1px solid red; float: left;  100px; overflow: hidden;">
                这是左侧的内容这是左侧的内容这是左侧的内容
            </div>
            <div id="right" style="margin-left: 110px; border: 1px solid #000;">
              这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容这是右侧的内容
    
            </div>
            <div style="clear: both;" title="该标签用于清除浮动,使left和right的父标签能自适应高度!">
            </div>
        </div>
        </form>
    </body>
    </html>
    
    通过一个特殊的div,将其style设置为clear为both即可。这样上面的两个div就不可能浮动超出下面这个div。
    关于这个属性,可以参考这篇文章
    http://www.w3school.com.cn/css/pr_class_clear.asp
     
    而关于高度相同,目前据我所知,一般都是通过javascript来强制干预。需要注意的是,我们需要读取offsetHeight属性。
    image 
     
  • 相关阅读:
    5秒解决Https请求 未能创建 SSL/TLS 安全通道
    Entity Framework,EF 手动DB FIRST,不使用设计器
    An item with the same key has already been added
    C#.NET AES ECB 加密
    Linux通过netstat命令统计连接数
    SqlServer 查看某个表的具体数据分布
    SqlServer查看某个表的索引详细信息
    Visual Studio2019 的 Git增加忽略文件
    SQL server 获取各种 约束信息
    C# 根据日期判断星期几
  • 原文地址:https://www.cnblogs.com/chenxizhang/p/1632919.html
Copyright © 2011-2022 走看看