Html 具有动态图像大小的Div

我有这样的结构：一个主分区，里面有两个分区。在第一张中，我有一张60%宽度的图像。另一个有35%的宽度。在第二个分区内，我还有两个分区，宽度为100%，高度为50%（每个分区）。主分区内的所有分区都有图像

我想做的是，div在主div中，有图像的大小。 如您所见，在小提琴中，第一个图像（主div中的第一个div）显示正确。但另一个分区（主分区内）未正确显示

这是迄今为止我所拥有的：

My div html：

<div class="features">
<div class="firstFeatureLine">
    <div class="firstLeft">
        <div id="cultureNews" class="outerbox">
            <img src="http://www.lookouch.com/www/assets/newImages/home/modulos/culturenews.jpg" />
            <div id="featuresTitle">
                Culture News
            </div>
        </div>
    </div>
    <div class="firstRight">
        <div id="firstRightUp">
            <div id="portfolio" class="outerbox">
            <img src="http://www.lookouch.com/www/assets/newImages/home/modulos/portfolio.jpg" />
                <div id="featuresTitle">
                    Portfolio
                </div>
            </div>
        </div>
        <div id="firstRightDown">
            <div id="culturenews1" class="outerbox">
            <img src="http://www.lookouch.com/www/assets/newImages/home/modulos/culturenews 1.jpg" />
                <div id="featuresTitle">
                    Culture News
                </div>
            </div>
        </div>
    </div>
</div>

<div class="secondFeatureLine">
    <div class="secondLeft">
        <div id="portfolio1" class="outerbox">
            <img src="http://www.lookouch.com/www/assets/newImages/home/modulos/portfolio.jpg" />
            <div id="featuresTitle">
                Portfolio
            </div>
        </div>
    </div>

    <div class="secondRight">
        <div id="school" class="outerbox">
            <img src="http://www.lookouch.com/www/assets/newImages/home/modulos/school.jpg" />
            <div id="featuresTitle">
                School
            </div>
        </div>
    </div>
</div>

这就是我想要做的，但是动态地使用图像大小（但是主div的高度必须是红色的div）：

错误在这里：

---

我对firstright和secondright的建议是做float:right； 宽度也为60%、40%

试试这个：

features {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    margin-top: 10%;
    margin-bottom: 10%;
}

div {
    border: 0px;
}

.outerbox {
    background-color: #FFFF00;
}

#featuresTitle {
    color: #ffffff;
    background-color: #6000ff;
    padding: 5px 5px 5px 5px;
    position: absolute;
    font-family: Montserrat;
    font-size: 13px;
    display: inline-block;
    top: 0;
    left: 0;
}

.firstFeatureLine {
    min-width: 20px;
    min-height: 20px;
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: red;
}

    .firstFeatureLine .firstLeft {
        width: 60%;
        height: 100%;
        display: inline-block;
        position: relative;
    }

        .firstFeatureLine .firstLeft #cultureNews {
        }

            .firstFeatureLine .firstLeft #cultureNews img {
                width: 100%;
            }

    .firstFeatureLine .firstRight {
        width: 40%;
        height: 100%;
        display: inline-block;
        position: absolute;
        float: right;
    }

        .firstFeatureLine .firstRight #firstRightUp {
            width: 100%;
            height: 50%;
            position: relative;
        }

            .firstFeatureLine .firstRight #firstRightUp #portfolio {
            }

                .firstFeatureLine .firstRight #firstRightUp #portfolio img {
                    width: 100%;
                }

        .firstFeatureLine .firstRight #firstRightDown {
            width: 100%;
            height: 50%;
            position: relative;
        }

            .firstFeatureLine .firstRight #firstRightDown #culturenews1 {
            }

                .firstFeatureLine .firstRight #firstRightDown #culturenews1 img {
                    width: 100%;
                }

       .secondFeatureLine {
    min-width: 20px;
    min-height: 20px;
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: green;
      }

    .secondFeatureLine .secondLeft {
        width: 40%;
        height: 100%;
        display: inline-block;
        position: relative;
    }

        .secondFeatureLine .secondLeft #portfolio1 {
        }

            .secondFeatureLine .secondLeft #portfolio1 img {
                width: 100%;
            }

    .secondFeatureLine .secondRight {
        width: 60%;
        height: 100%;
        display: inline-block;
        position: relative;
        float: right;
    }

        .secondFeatureLine .secondRight #school {
        }

            .secondFeatureLine .secondRight #school img {
                width: 100%;
            }

---

你能解释一下你想做得更好一点吗？你能详细说明一下你面临的问题吗？@ShashankSharma我想我已经解决了。。。包含图片的div比图片大，所以有“空白”我已经添加了我想要的图片，现在正确的div的inst与我想要的大小有关。ohhk@如果你是对的。。。我在浏览器中也看到了同样的事情。

features {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    margin-top: 10%;
    margin-bottom: 10%;
}

div {
    border: 0px;
}

.outerbox {
    background-color: #FFFF00;
}

#featuresTitle {
    color: #ffffff;
    background-color: #6000ff;
    padding: 5px 5px 5px 5px;
    position: absolute;
    font-family: Montserrat;
    font-size: 13px;
    display: inline-block;
    top: 0;
    left: 0;
}

.firstFeatureLine {
    min-width: 20px;
    min-height: 20px;
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: red;
}

    .firstFeatureLine .firstLeft {
        width: 60%;
        height: 100%;
        display: inline-block;
        position: relative;
    }

        .firstFeatureLine .firstLeft #cultureNews {
        }

            .firstFeatureLine .firstLeft #cultureNews img {
                width: 100%;
            }

    .firstFeatureLine .firstRight {
        width: 40%;
        height: 100%;
        display: inline-block;
        position: absolute;
        float: right;
    }

        .firstFeatureLine .firstRight #firstRightUp {
            width: 100%;
            height: 50%;
            position: relative;
        }

            .firstFeatureLine .firstRight #firstRightUp #portfolio {
            }

                .firstFeatureLine .firstRight #firstRightUp #portfolio img {
                    width: 100%;
                }

        .firstFeatureLine .firstRight #firstRightDown {
            width: 100%;
            height: 50%;
            position: relative;
        }

            .firstFeatureLine .firstRight #firstRightDown #culturenews1 {
            }

                .firstFeatureLine .firstRight #firstRightDown #culturenews1 img {
                    width: 100%;
                }

       .secondFeatureLine {
    min-width: 20px;
    min-height: 20px;
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: green;
      }

    .secondFeatureLine .secondLeft {
        width: 40%;
        height: 100%;
        display: inline-block;
        position: relative;
    }

        .secondFeatureLine .secondLeft #portfolio1 {
        }

            .secondFeatureLine .secondLeft #portfolio1 img {
                width: 100%;
            }

    .secondFeatureLine .secondRight {
        width: 60%;
        height: 100%;
        display: inline-block;
        position: relative;
        float: right;
    }

        .secondFeatureLine .secondRight #school {
        }

            .secondFeatureLine .secondRight #school img {
                width: 100%;
            }