Question

链接到实时版本：http://45.55.186.46/test/

我有一组部分，我想使用bottom属性垂直对齐图像。但是目前这些列的高度不同。当我尝试将高度：100％属性添加到所有父标签时，图像会放大并溢出该部分。任何帮助将不胜感激。

由于

HTML

<div class = "container-fluid lookbook sectionContainer">
        <div class = "row lookbookRow">
            <div class = "col-md-6">
                <img class = "img-responsive lookbook1" src = "img/lookbook1.jpg" alt = "lookbook1" >
            </div>
            <div class = "col-md-6">
                <div class = "row">
                    <div class = "col-md-6">
                        <img class = "img-responsive desktopOnly lookbook2" src = "img/lookbook2.jpg" alt = "lookbook2" >
                    </div>
                    <div class = "col-md-6  lookbookText section">
                        <h1> <strong> LEARN THE <br> PRINT RULES </strong></h1>
                        <h2> <strong> Take a lesson in 'how to wear print' from fashion aficionado, TV presenter and newly crowned 'Print Princess', Laura Jackson. </strong></h2>
                        <div style = "text-align: center">
                            <button id = "lookbookButton"> <strong> VIEW THE LOOKBOOK > </strong></button>
                        </div>
                    </div>
                </div>
                <div class = "row secondaryImages">
                    <div class = "col-xs-7">
                        <img class = "img-responsive" src = "img/lookbook3.jpg" alt = "lookbook3">
                    </div>
                    <div class = "col-xs-5">
                        <img class = "img-responsive lookbook4" src = "img/lookbook4.jpg" alt = "lookbook4">
                    </div>
                </div>
            </div>
        </div>
    </div>

Section CSS

.lookbook {
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
}

#lookbookButton {
font-family: "chantilly-light", sans-serif;
text-align: center;
background-color: #C3D5EF;
border-radius: 0px;
border: none;
color: #000000;
letter-spacing: 2px;
padding:15px;
font-size: 22px;
}

.lookbookText {
height: 100%;
}

.lookbook2 {
height: 400px;

}

.lookbookRow {
margin: 0px;
}

.lookbook4 {

bottom: -100px;
}

.secondaryImages {
padding-top: 20px;

}

全球CSS

html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden; 


}

.bannerRow h2 {
font-family: "chantilly-light", sans-serif;
letter-spacing: 1px;
text-align: center;
font-size: 24px;
color: #333333;
padding-top: 10px;
padding-bottom: 10px;
}

.bannerRow h1 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 49px;
letter-spacing: 5px;
color: #345e91;
}

.sectionContainer {
margin-top: 20px;
}

.section h1 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 40px;
letter-spacing: 8px;
color: #000000;
}

.section h2 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 24px;
padding-bottom: 20px;
letter-spacing: 3px;
color: #000000;
}

.mobileOnly {
display:none;
}

Answer 1

在您的测试页面上进行了一些实验，并获得了足够的css解决方案。将要垂直对齐的.col- *类设置为以下css的底部：

  float: none;
  display: inline-block;
  vertical-align: bottom;

然后将父行设置为display: table;以弥补内联块创建的额外填充，并且它应该正确对齐。它仍然需要对一些更复杂的行进行一些调整，但似乎效果很好。

Bootstrap相等列高（使用底部垂直对齐图像）

1 个答案: