身高儿童的div匹配父

所以我看在工地附近，知道有这样的问题，但他们中许多人是可变宽度的布局，我不能让这些技术与我有什么工作这样做。身高儿童的div匹配父

我只是造型形式，并因与浏览器的大小如何调整的麻烦。你可以在下面的图片中看到我正在使用的div和我的问题。

enter image description here

正如你可以看到，下面的.col-1-3 DIV，因为浏览器调整大小，还有，显示了一个小空间。我想在.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/

来源

2013-04-07 Keenan Payne

有些代码可能的帮助。 – 2013-04-07 02:34:12

当然，得到了添加！ – 2013-04-07 06:08:22

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

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

你要确保你应用margin-left右半。

见这个例子中（根据您提供的代码）：http://jsfiddle.net/ULM5s/1/

来源

2013-04-07 02:41:28 fletch

嗨，感谢您的帮助。事实上，这并梳理工作，但现在右列是坐在那些在表单上的标签背后：http://i.imgur.com/70J5SxU.png – 2013-04-07 05:59:24

编辑答案包括'保证金left'到你的右边，并分叉你的jsfiddle来显示新的代码。你不需要再添加'left'和'right'类。 – fletch 2013-04-07 14:38:50

这是完美的人，非常感谢您的帮助，我非常感谢。 – 2013-04-07 17:43:17

身高儿童的div匹配父

回答

相关问题