Question

我有一个父div，里面有两个div。第一个div将位于左侧，其中一个图片高度为100％，另一个位于旁边（右侧）内容。

我无法让左div跟随父div。高度100％不起作用。

查看正在发生的事情的照片：

http://i.imgur.com/Ld2qdUd.jpg

结果就是这样：

http://i.imgur.com/nuQ5Rnj.jpg

以下是我在jsFiddle中的代码：

http://jsfiddle.net/AHd65/

HTML：

<div class="enquetes-listagem">
    <div class="enquete">
        <div class="enquete-foto">
            <a href=""><img src="http://img7.orkut.com/images/tiny/1324184718/564030436/ip.jpg"></a>
        </div>
        <div class="enquete-data">
            <a href="" class="afb">Juninho CHR</a>
            <span class="grb">
                <span id="gwt-uid-604">241 votos.</span>
                <span class="" id="gwt-uid-605" title="19/10/2011 18:18:34">19/10/2011</span>
            </span>
            <div class="o-b">
                <a href="#CommPoll?cmm=111812829&amp;pid=1928547172&amp;pct=1319030314">Que tipo de computador você prefere?</a>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="">
                        Option one is this and that&mdash;be sure to include why it's great
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

body {
    font-family: Arial, Verdana, Helvetica, sans-serif;
}

a {
    color: #428bca;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* div pai */
.enquetes-listagem .enquete {
    background: yellow;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
}

/* div filho esquerda */
.enquetes-listagem .enquete .enquete-foto {
    max-width: 34px;
    float: left;
    margin-right: 10px;
    height: 100%; /* Not Work, why???? */
    background: red;
}

/* div filho direita */
.enquetes-listagem .enquete .enquete-data {
    background: blue;
}

任何人都可以帮助我吗？

Answer 1

试用此代码：CheckItOut

的CSS：

  body {
    font-family: Arial, Verdana, Helvetica, sans-serif;
}
a {
    color: #428bca;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

 .enquetes-listagem .enquete {
    background: yellow;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
    position:relative;
    height:60px;
}

 .enquetes-listagem .enquete .enquete-foto {
    position:absolute;
    max-width: 34px;
    float: left;
    margin-right: 10px;
    width:100%;
    overflow:auto;
    background: red;
    height:inherit;
}

 .enquetes-listagem .enquete .enquete-data {
    position:absolute;
    margin-left: 34px;
    float: left;
    background: blue;
    height:inherit;
}

Answer 2

你可以尝试将你的.enquete-foto和.enquete-data浮动并将父div设置为蓝色，如下所示：

.enquete-foto, enquete-data {
  float:left;
  display:block;
}

.enquete-foto img {
  height: 100%
}

.enquetes-listagem .enquete {
   background: blue;
   display:block;
   min-height: 70px; #This could be any height?
}

Answer 3

以下是使用表格的解决方案：http://jsfiddle.net/AHd65/30/。

body {
    font-family: Arial, Verdana, Helvetica, sans-serif;
}

a {
    color: #428bca;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* div pai */
.enquetes-listagem .enquete {
    background: yellow;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
    display: table;
    width: 100%;
}

.enquetes-listagem .enquete .enquete-foto {
    width: 34px;
    background: red;
    display: table-cell;
    vertical-align: top;
}

.enquetes-listagem .enquete .enquete-data {
    background: blue;
    display: table-cell;
}

在浮动子<div> </div>上使用高度100％

3 个答案: