将图像放在一个部分的2列内

Question

现在代码：

HTML：

            <section class="sponsorSection">
                <div class="sponsorImageRow">
                    <div class="sponsorImageColumn">
                        <img src="img/kvadrat_logo.png" class="sponsorpicture1"/>
                    </div>
                    <div class="sponsorImageColumn">
                        <img src="img/small_vertical_logo.png" class="sponsorpicture2"/><br>
                    </div>
                </div>
                <div class="sponsorImageRow">
                    <div class="sponsorImageColumn">
                        <img src="img/long_vertical_logo.png" class="sponsorpicture1"/>
                    </div>
                    <div class="sponsorImageColumn">
                        <img src="img/logo4.png" class="sponsorpicture2"/><br>
                    </div>
                </div>
                <div class="sponsorImageRow">
                    <div class="sponsorImageColumn">
                        <img src="img/logo5.jpg" class="sponsorpicture1"/>
                    </div>
                </div>
            </section>   

CSS：

.sponsorSection{
    width: 480px;
    margin-top:30px;
    border:2px solid rgba(0, 0, 0, .2);
    border-radius: 5px;
}
.sponsorImageRow{
    height: 50px;
}
.sponsorImageColumn{
    width : 50% ;
    display: inline;
}
.sponsorpicture1{
    padding: 10px;
    max-width: 100%;
    max-height: 95%;
    height : auto;
    margin: 0 auto;
}
.sponsorpicture2{
    padding: 10px;
    max-width: 100%;
    max-height: 95%;
    height : auto;

    margin: 0 auto;
}

虽然看起来不正确：

Answer 1

对您的CSS进行以下更改 -

.sponsorImageColumn{
    width : 50% ;
    float : left; /*remove display property and use float as you want to set the width*/
}

希望这能解决您的疑问

Answer 2

我不确定，如果我理解了您要求的定位，但如果我查看您的代码，您希望您的图像水平居中？由于图像是默认的内联元素，因此不会考虑边距：0 auto。尝试这样的事情：

/* keep it as a block element, not inline */
.sponsorImageColumn {
    width : 50% ;
    float:left;
    display: block;
}
/* and image also as a block element */
.sponsorSection img {
    display:block;
}

我整理了一个小fiddle来演示。 对于更复杂的定位，您可以查看css语法显示：table，table-row等，以模拟包含其他html元素的经典表。