css - CSS布局中的偶数列-6ren

css - CSS布局中的偶数列

转载作者：行者123 更新时间：2023-11-28 18:50:52

我一直在尝试使此布局中的列具有相同的高度。这些列将由查询填充，因此它们的高度需要是动态的，但在底部我希望它们都是均匀的。

有人可以帮忙吗!

生活www.onlinesportcenter

代码

<!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>
<title>layout</title>
<style>
body {

    margin:0;
    border:0;
    padding:0;
    height:100%;
    max-height:100%;
    background:#01245c;
    font-family:arial, verdana, sans-serif;
    font-size:75%;
    overflow: hidden;

}


* html body {

    padding:116px 0 20px 0;

}

.header-wrap {

    position:absolute;
    top:0;
    height:116px;
    width:100%;
}

.header-wrap #header{

    margin:0 auto;
    position:relative;

}

#header {
    background: #666;
    position:absolute;
    top:0;
    left:0;
    width:1020px;
    height:116px;
    text-align:center;
    padding:0;
    margin:0;

}

* html #header {height:116px;}



.container-wrap {

    position:absolute;
    width:100%;
    height:auto;
    margin-top:116px;
    margin-bottom:20px;
    top:0;
    bottom:0;
}

.container-wrap #container {

    margin:0 auto;
    position:relative;
    top:0;
    height:100%;
}

#container {

    font-family: Arial, sans-serif;
    font-size: 1em;
    position:fixed;
    top:116px;
    left:0;
    bottom:20px;
    right:0;
    background:#fff;
    padding:0;
    width:1020px;

}

* html #container {

    height:100%;
    width:1020px;

}

#container img {margin:0;}


#main {
    background:#fff;
    width:790px;
    height:100%;
    float:left;  
    overflow:auto;
}

.main-multi-form {
    background:#efefef;
    width:764px;
    margin:4px;
    border:1px solid #adadad;
    vertical-align:top; 
}

.main-multi-form-bettype {
    background:#ddd;
    height: 50px;
    margin:8px 8px 0 8px;
    padding: 14px 0 0 0;
    text-align:center;
    vertical-align:top; 
}

.main-multi-form-bettype-extra {
    background:#dddddd;
    height: 24px;
    vertical-align:top; 
    padding:0 0 6px 0;
    margin:0 8px 0 8px;
    text-align:center;
}

.main-multi-form-events {
    background:#ddd;
    margin:8px 8px 8px 8px;
    padding-top: 5px;
    text-align:center;
    vertical-align:top;
    width: 748px;
    overflow:hidden;
    zoom:1; /*for IE*/
}

.main-multi-form-column {
    background: #ccc;
    float:left;
    width:177px;
    margin: 5px;
}

.main-multi-form-sports{
    background:#fff;
    border:1px solid #666;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 1em;
    font-weight:bold;
    height: 18px;
    padding: 0;
    text-align:center;
    vertical-align:middle;
    width:175px;
}

.main-multi-form-leagues{
    padding: 0;
    text-align:left;
    vertical-align:top;
    width:177px;
    height:22px;

}

.main-multi-form-leagues-double{
    padding: 0;
    text-align:left;
    vertical-align:top;
    width:177px;    
    height:32px;
}

.main-multi-form-leagues-triple{
    padding: 0;
    text-align:left;
    vertical-align:top;
    width:177px;    
    height:44px;
}

.main-multi-form-leagues-checkbox{
    float:left;
    margin: 0;
    padding: 0 0 0 3px;
    vertical-align:top;
    width:17px; 
}

.main-multi-form-leagues-league{
    float:right;
    margin: 0;
    padding: 2px 0 0 0;
    vertical-align:top;
    width:157px;
}

.main-multi-form-leagues-league a,a:Hover,a:Visited{
    color: #369;
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    font-weight:bold;
    text-decoration:none;
}

#right {

    width:228px;
    height:100%;
    float:right;  
    border-left:1px solid #73a2bd;
    border-right:1px solid #73a2bd;
}


.footer-wrap{
    position:absolute;
    bottom:0;
    height:20px;
    width:100%;

}

.footer-wrap #footer{

    position:relative;
    margin:0 auto;
} 

#footer {
  background: #666;
  position:absolute;
  bottom:0;
  left:0;
  width:1020px;
  height:19px;
  overflow:auto;
  text-align:center;
  border-top:1px solid #35759a;

}

* html #footer {height:20px;}

#footer p {

  color:#fff;
  font-size:1em;
  margin:2px 0 0 0;

}

form {
    margin:0;
    padding:0;
}

select {

    font-family: Arial,sans-serif;
    font-size:1em;
    color:#000000;
    margin:0;
    padding:0;
    vertical-align:top;
    font-size: 1em;
}

input {

    font-family: Arial,sans-serif;
    font-size:1em;
    color:#000000;
    margin:0;
    padding:0;
    vertical-align:top;
    font-size: 1em;
}


hr
{
    width:100%;
    color: #000000;
    height: 1px;
}
</style>

</head>

<body>

<div class="header-wrap">  

    <div id="header">

        HEADER

    </div>

</div>

<div class="container-wrap">

    <div id="container">

        <div id="main">


            <div class="main-multi-form">



                            <div class="main-multi-form-bettype">

                                    TOP MAIN

                            </div>


                            <div class="main-multi-form-events">


                                    <div class="main-multi-form-column">


                                            <div class="main-multi-form-sports">Column 1</div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                           <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                    </div>

                                    <div class="main-multi-form-column">


                                            <div class="main-multi-form-sports">Column 2</div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                           <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                    </div>

                                    <div class="main-multi-form-column">


                                            <div class="main-multi-form-sports">Column 3</div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                           <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>
                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>
                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                    </div>

                                    <div class="main-multi-form-column">


                                            <div class="main-multi-form-sports">Column 4</div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                           <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                    </div>

                            </div>



            </div>


        </div>

        <div id="right">
            <br /><br />
            RIGHT

        </div>

    </div>

</div>

<div class="footer-wrap">

    <div id="footer">FOOTER</div>

</div>


</body>

</html>

最佳答案

我建议使用 jquery 使您的列等高。请参阅此链接以获取可以直接放入页面中的文章和示例代码。

http://www.cssnewbie.com/equal-height-columns-with-jquery/

关于css - CSS布局中的偶数列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9345828/

文章推荐： javascript - 隐藏然后专注于下面的选择元素

文章推荐： jquery - Internet Explorer 鼠标输入可能的错误

文章推荐： javascript - 如何做 javascript/jQuery 文本效果 david desandro

文章推荐： css - 网格布局与CSS？

mysql - SUM(COUNT(列)*AVG(列)) AS 列
我正在 csv 上使用 hadoop 来分析一些数据。我使用sql/mysql(不确定)来分析数据，现在陷入了僵局。我花了好几个小时在谷歌上搜索，却没有找到任何相关的东西。我需要一个查询，在该查询中
html - BOOTSTRAP 网格 | 4 列 > 2 列 > 1 列
我正在为 Bootstrap 网格布局的“简单”任务而苦苦挣扎。我希望在大视口(viewport)上有 4 列，然后在中型设备上有 2 列，最后在较小的设备上只有 1 列。当我测试我的代码片段时，似
mysql - 仅选择具有重复(A 列 || B 列)但不同(C 列)值的记录
对于这个令人困惑的标题，我深表歉意，我想不出这个问题的正确措辞。相反，我只会给你背景信息和目标: 这是在一个表中，一个人可能有也可能没有多行数据，这些行可能包含相同的 activity_id 值，也可
sequelize.js - 如何使用 Sequelize 结果查找 A 列 > B 列 + C 列
具有 3 列的数据库表 - A int , B int , C int 我的问题是: 如何使用 Sequelize 结果找到 A > B + C const countTasks = await Ta
MySQL 选择 DISTINCT 列 1、列 2From 表 order by 列 2 DESC
我在通过以下功能编写此查询时遇到问题: 首先按第 2 列 DESC 排序，然后从“不同的第 1 列”中选择只有 Column1 是 DISTINCT 此查询没有帮助，因为它首先从第 1 列中进行选择
css - 使用 bootstrap，台式机中有 4 列，平板电脑中有 2 列，移动设备中有 1 列
使用 Bootstrap 非常有趣和有帮助，目前我在创建以下需求时遇到问题。 “使用 bootstrap 在桌面上有 4 列，在平板电脑上有 2 列，在移动设备上有 1 列”谁能告诉我正确的结构最佳
r - 比较第 1 列(第 1 列)中的连续值并使用第 1 列后比较结果创建新列(第 2 列)
我是 R 新手，正在问一个非常基本的问题。当然，我在尝试从所提供的示例中获取指导的同时做了功课here和 here ，但无法在我的案例中实现这个想法，即可能是由于我的问题中的比较维度更大。我的实
python - 如果文件 1 中的 A 列 = 文件 2 中的 A 列，则替换为文件 2 中的 B 列
通常我会使用 R 并执行 merge.by，但这个文件似乎太大了，部门中的任何一台计算机都无法处理它! (任何从事遗传学工作的人的附加信息)本质上，插补似乎删除了 snp ID 的 rs 数字，我只剩
python - 当第 1 列 > 0 且第 2 列 <= 0 时，如何将第 1 列的值分配给第 2 列
我有一个 df , delta1 delta2 0 -1 2 0 -1 0 0 0 我想知道如何分配 delt
MySQL 加入 ON 列 a IN(列 b)
您好，我想知道是否可以执行以下操作。显然，我已经尝试在 phpMyAdmin 中运行它，但出现错误。也许还有另一种方式来编写此查询。 SELECT * FROM eat_eat_restaurants
python - 如何将 listA 列 1 值匹配并替换为与 ListB 列 1 匹配的 ListB 列 2 值，就像我们在 vlookup 中所做的那样
我有 2 个列表(标题和数据值)。我想要将数据值列 1 匹配并替换为头文件列 1，以获得与 dataValue 列 1 和标题值列 2 匹配的值头文件 TotalLoad,M0001001 Hois
linux - 如果 file1 的 B 列 = file2 的 B 列，则将 file1 的 A 列替换为 file2 的 A 列
我有两个不同长度的文件，file2 是一个很大的引用文件，我从中提取文件 1 的数据。我有一行 awk，我通常会对其进行调整以在我的文件中进行查找和替换，但它总是在同一列中进行查找和替换。所以对于
sql - 检查一个表(列)中的日期是否适合另一个表(列)中的另一个日期
假设我有两个表，如下所示。 create table contract( c_ID number(1) primary key, c_name varchar2(50) not
java - 无法将减号插入具有检查约束的 varchar 列(列 <> '')
我有一个带有 varchar 列的 H2 表，其检查约束定义如下: CONSTRAINT my_constraint CHECK (varchar_field <> '') 以下插入语句失败，但当我删
CSS 3 列，为什么第三列接管了其他 2 列？
这是最少量的代码，可以清楚地说明我的问题: One Two Three 前 2 个 div 应该是 2 个左列。第三个应该占据页面的其余部分。最后，我将添加选项来隐藏和
azure - 该查询未返回 TimeGenerate 列。请编辑查询并包含 TimeGenerate 列
在 Azure 中的 Log Analytics 中，我为 VM Heartbeat 选择一个预定义查询，我在编辑器中运行查询正常，但当我去创建警报时，我不断收到警报“查询未返回 TimeGenera
azure - 该查询未返回 TimeGenerate 列。请编辑查询并包含 TimeGenerate 列
在 Azure 中的 Log Analytics 中，我为 VM Heartbeat 选择一个预定义查询，我在编辑器中运行查询正常，但当我去创建警报时，我不断收到警报“查询未返回 TimeGenera
java - 为什么 [列,行] 而不是 [行,列]
今天我开始使用 JexcelApi 并遇到了这个:当您尝试从特定位置获取元素时，不是像您通常期望的那样使用sheet.getCell(row,col)，而是使用sheet.getCell(col,ro
C# 显示数据库的 2 列，共有 28 列
我有一个包含 28 列的数据库。第一列是代码，第二列是名称，其余是值。 public void displayData() { con.Open(); MySqlDataAdapter
html - 我的网页是 2 列，但在放大时重叠成 1 列？
我很沮丧:每当我缩小这个网页时，一切都变得一团糟。我如何将网页居中，以便我可以缩小并且元素不会被错误定位。 (它应该是 2 列，但所有内容都合并为 1)我试过但由于某种原因，这不起作用。 www.o

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - CSS布局中的偶数列