在容器div中對齊四個正方形div

Question

我想並排垂直對齊四個單個div。 每個div包含文字和圖片。 由於某種原因，它不起作用。 有些div的位置更高。 我希望它看起來像這樣：

div的容器：

---

DIV DIV DIV DIV

---

<div id="skills-container" class="full-size-properties">
    <h1 class="site-titles">Personal Skills</h1>
    <div id="four-rectangles">
        <div id="front-end" class="single-skills-rectangle">
            <img src="Images/front-end.png" />
            <h1>FRONT-END</h1>
            <h2>CSS3, HTML5, JavaScript</h2>
        </div>

        <div id="back-end" class="single-skills-rectangle">
            <img src="Images/back-end.png" />
            <h1>BACK-END</h1>
            <h2>JAVA</h2>
        </div>

        <div id="design" class="single-skills-rectangle">
            <img src="Images/design.png" />
            <h1>DESIGN</h1>
            <h2>?</h2>
        </div>

        <div id="photography" class="single-skills-rectangle">
            <img src="Images/photography.png" />
            <h1>PHOTOGRAPHY</h1>
            <h2>Canon and Nikon</h2>
        </div>
    </div>
</div>

這是CSS：

#skills-container {
    height: 400px;
    background: #F8F8F8 url("../Images/noisy.png");
    top: 5px;

}

#four-rectangles {
    position: absolute;
    top: 60px;
    background-color: yellow;
}

.single-skills-rectangle {
    background-color: #fff;
    width: 200px;
    height: 210px;
    border: 1px solid #CBCBCB;
    border-radius: 10px;
    display: inline-block;
    margin-left: 25px;
    text-align: center;
}

.single-skills-rectangle h1 {
    font-size: 20px;
    font-weight: 700;
    color: #06557c;
    margin-top: 35px;
}

.single-skills-rectangle img {
    margin-top: 30px;
}

.single-skills-rectangle h2 {
    font-size: 15px;
    color: #808080;
    margin-top: 7px;
}

Answer 1

只需在.single-skills-rectangle類中添加vertical-align: top 。

 body { margin: 0; } #skills-container { height: 400px; background: #F8F8F8 url("../Images/noisy.png"); top: 5px; } #four-rectangles { position: absolute; top: 60px; background-color: yellow; } .single-skills-rectangle { background-color: #fff; width: 120px; height: 210px; border: 1px solid #CBCBCB; border-radius: 10px; display: inline-block; margin-left: 15px; text-align: center; vertical-align: top; } .single-skills-rectangle h1 { font-size: 14px; font-weight: 700; color: #06557c; margin-top: 35px; } .single-skills-rectangle img { margin-top: 30px; } .single-skills-rectangle h2 { font-size: 12px; color: #808080; margin-top: 7px; } 

 <div id="skills-container" class="full-size-properties"> <h1 class="site-titles">Personal Skills</h1> <div id="four-rectangles"> <div id="front-end" class="single-skills-rectangle"> <img src="http://lorempixel.com/70/70/city" /> <h1>FRONT-END</h1> <h2>CSS3, HTML5, JavaScript</h2> </div> <div id="back-end" class="single-skills-rectangle"> <img src="http://lorempixel.com/80/80/city" /> <h1>BACK-END</h1> <h2>JAVA</h2> </div> <div id="design" class="single-skills-rectangle"> <img src="http://lorempixel.com/60/60/city" /> <h1>DESIGN</h1> <h2>?</h2> </div> <div id="photography" class="single-skills-rectangle"> <img src="http://lorempixel.com/50/50/city" /> <h1>PHOTOGRAPHY</h1> <h2>Canon and Nikon</h2> </div> </div> </div> 

Answer 2

一種解決方案是對所有圖像使用默認width ，而不管每個圖像的大小如何：

.single-skills-rectangle img {
    width: 100px;
}

程式碼片段

 #skills-container { height: 400px; background: #F8F8F8 url("../Images/noisy.png"); top: 5px; } #four-rectangles { position: absolute; top: 60px; background-color: yellow; } .single-skills-rectangle { background-color: #fff; width: 200px; height: 210px; border: 1px solid #CBCBCB; border-radius: 10px; display: inline-block; margin-left: 25px; text-align: center; } .single-skills-rectangle h1 { font-size: 20px; font-weight: 700; color: #06557c; margin-top: 35px; } .single-skills-rectangle img { margin-top: 30px; } .single-skills-rectangle h2 { font-size: 15px; color: #808080; margin-top: 7px; } .single-skills-rectangle img { width: 100px;/*add a default image width*/ } 

 <div id="skills-container" class="full-size-properties"> <h1 class="site-titles">Personal Skills</h1> <div id="four-rectangles"> <div id="front-end" class="single-skills-rectangle"> <img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" /> <h1>FRONT-END</h1> <h2>CSS3, HTML5, JavaScript</h2> </div> <div id="back-end" class="single-skills-rectangle"> <img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" /> <h1>BACK-END</h1> <h2>JAVA</h2> </div> <div id="design" class="single-skills-rectangle"> <img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" /> <h1>DESIGN</h1> <h2>?</h2> </div> <div id="photography" class="single-skills-rectangle"> <img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" /> <h1>PHOTOGRAPHY</h1> <h2>Canon and Nikon</h2> </div> </div> </div>