Question

我想设置一个由3个单元组成的块：

This is how I want to set it up

父div设置为100％宽度，两列宽度为50％。内容需要随页面扩展/缩小，因为它将是一个响应页面。由于我不知道父div的高度，我只能将右边的行设置为百分比高度，但50％对于自动高度父级无效。我怎样才能让上半身和情人有一半50％的父div？图像的宽高比始终为1：1

<div class="container">
<div class="column blue"><img src="square.png"></div><!--
--><div class="column yellow"><!--
    --><div class="row green">Upper half</div><!--
    --><div class="row red">Lower half</div>
</div>

CSS

body {
    margin 0;
    padding 0;
}
.container {
    width: 100%;
    display: inline-block;
    padding: 0;
    margin: 0;
}
img {
    width: 100%;
    padding 0;
    margin 0;
    border: none;
}
.column {
    width: 50%;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
}
.row {
    width: 100%;
    height: 50%;
    padding: 0;
    margin: 0;
    vertical-align: top;
    display: inline-block;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}
.blue {
    background-color: blue;
}
.yellow {
    background-color: yellow;
}

到目前为止，这是我的代码：http://jsfiddle.net/7y9eK/

Answer 1

更新您的CSS，如下所示。

.column {
width: 50%;
padding: 0;
margin: 0;
display: table-cell;
vertical-align: top;
}
.red {
background-color: red;
height:50%;
}
.green {
background-color: green;
height:50%;
}

更新了以下的jsfiddle。

http://jsfiddle.net/7y9eK/14/

Answer 2

我用所需的输出更新你的小提琴，请浏览链接： jsfiddle DEMO

<强> CSS

body {
    margin 0;
    padding 0;
}
.container {
    width: 100%;
    display: inline-block;
    padding: 0;
    margin: 0;
}
img {
    width: 100%;
    padding 0;
    margin 0;
    border: none;
}
.column {
    width: 50%;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
}
.row {
    width: 100%;
    height: 50%;
    padding: 0;
    margin: 0;
    vertical-align: top;
    display: inline-block;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}
.blue {
    background-color: blue;
}
.yellow {
    background-color: yellow;
}

<强> HTML

<div class="container">
    <div class="column blue"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Tiling_Regular_4-4_Square.svg/320px-Tiling_Regular_4-4_Square.svg.png"></div><!--
    --><div class="column yellow"><!--
        --><div class="row green">Upper half</div><!--
        --><div class="row red">Lower half</div>
    </div>
</div>

Answer 3

// test you this code 

.container {
      width: 1000px;
      display: table;
      border:1x solid #ddd;
       margin:10px auto;
 }
img {
    width: 100%;
}
.column {
     width: 50%;
     display: table-cell;
     vertical-align:top;
  }

   .row {
      display:table-row;
 }
 .red,.green {
    background-color: red;
    display:table-cell;
    height:250px;
    text-align:center;
    vertical-align:middle;
    font-size:20px;
    color:#fff;
   }
   .green {
    background-color: green;
    }
  .blue {
    background-color: blue;
     }
  .yellow {
     background-color: yellow;
    }

   // html code test 

   <div class="container">
    <div class="column blue">
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Tiling_Regular_4-4_Square.svg/320px-Tiling_Regular_4-4_Square.svg.png">
    </div>

    <div class="column yellow">
        <div style="display:table;width:100%">
            <div class="row">
                <div class="green">
                    upper half
                </div>
            </div>
            <div class="row">
                <div class="red">
                    Lower half
                </div>
            </div>
        </div>
    </div>
   </div>

Answer 4

使用javascript和jquery

(function myFunction() {

    var imgHeight = $("img").outerHeight(true);
    jQuery('.column').css('height', (imgHeight) + "px");
    $(window).resize(function () {
        myFunction();
    });
})();

http://jsfiddle.net/vlrprbttst/7y9eK/13/

我也改变了一些CSS。

基本上这会捕获图像的高度并将其附加到列上，这样你的列就会有一个px高度设置，行的50％高度现在可以工作，因为它们的父级具有固定的高度，即使它是动态的（也可以调整大小！）

Answer 5

仅限css是不可能的。你必须使用低于js。

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        var container = $('.container');
        var imgContainer = $('.container img');
        if (container.length && imgContainer.length) {
            container.innerHeight(imgContainer.height());
        }
    });
    $(window).resize(function () {
        var container = $('.container');
        var imgContainer = $('.container img');
        if (container.length && imgContainer.length) {
            container.innerHeight(imgContainer.height());
        }
    });
</script>

并且必须将高度：100％添加到列类。所以更新后的类看起来像这样：

.column {
width: 50%;
padding: 0;
margin: 0;
display: inline-block;
vertical-align: top;
height:100%;
}

如何在自动高度div的子div上设置50％的高度？

5 个答案: