0

所以我环顾了这个网站，知道有这样的问题，但其中有很多是针对流体宽度布局的，我无法让这些技术与我正在做的事情一起工作。

我只是在设计一个表单，并且在浏览器如何调整大小时遇到​​了麻烦。您可以在下图中看到我正在使用的 div 和我的问题。

在此处输入图像描述

如您所见，在.col-1-3div 下方，随着浏览器调整大小，出现了一些空间。我想将 的高度与.col-1-3其父级的高度相匹配，.formInput.

有谁知道无论如何要这样做？我不在乎它是黑客还是某种 Javascript/jQuery 解决方案。

编辑

我敢肯定你们想要一些代码，谁不想呢？

这是表单上第一个字段和标签的一些 HTML：

<div class="formInput">
    <div class="grid">
        <div class="col-1-3 left">
            <label>
                <p class="right">AsQ a question <img src="{{ STATIC_URL }}rd/images/arrow_right_small.png" /></p>
            </label>
        </div><!-- .col-1-3 -->         

        <div class="col-2-3 right">
            {{ form.name }} **Django code**
        </div><!-- .col-2-3 -->
    </div><!-- .grid -->

这是所述字段的所有必要CSS：

.right { float: right: }

.left { float: left; }

.formInput { 
    border: 6px solid #A5C3D2;
    display: block; 
    margin-bottom: 25px;    

    behavior: url('./scripts/border-radius.htc');
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
}

.formInput .col-1-3 { 
    background: #006180; 
    color: #FDBA63;
    text-align: right;

    behavior: url('./scripts/border-radius.htc');
    border-radius: 12px 0 0 12px;
    -moz-border-radius: 12px 0 0 12px;
    -webkit-border-radius: 12px 0 0 12px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.formInput .col-1-3 label p { width: 220px; }

/* Grid */
*, *:after, *:before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.grid:after {
    clear: both;
    content: "";
    display: table;
}

/* Grid Gutters */
[class*='col-'] {
    float: left;
    padding-right: 20px;
}

[class*='col-']:last-of-type { padding-right: 0; }

.col-2-3 { width: 66.66%; }

.col-1-3 { width: 33.33%; }

如果你们想看看我的问题的一个工作示例：http: //jsfiddle.net/qMgwz/

4

1 回答 1

1

添加position:relative到 的父元素.col-1-3。

然后给.col-1-3一个position:absolute; height:100%;

您需要确保将 amargin-left应用于右半部分。

请参阅此示例（基于您提供的代码）：http: //jsfiddle.net/ULM5s/1/

于 2013-04-07T02:41:28.713 回答