如何将一个div放在底部并在中心创建另一个div？

Question

所以我正在尝试创建一个显示和图像的div，并在底部有一个图像标题。图像应该有足够的空间，以便它不被拉伸，看起来很奇怪。然后我想拍摄那个div，并一遍又一遍地重现它，以获得尽可能多的图像。

我绘制并描绘了我正在尝试的东西！描述我希望你们理解它。

这是我到目前为止的代码。我知道它不是很多，但我有点失落。

.box{
	height:250px;
	width:200px;
	margin-top:10px;
	margin-right:15px;
	margin-left:15px;
	margin-bottom:10px;
	float:left;
	background-color:yellow;
}

.photo-div{
	height:50px;
	width:50px;
	background-color:blue;
}

.title-wrap{
	height:40px;
	width: 200px; 
	background:pink;
}

<div class="box">
	<div class="photo-div">
	</div>
    <div class="title-wrap">
    </div>
</div>

Answer 1

寻找这样的东西？

.box{
	height:250px;
	width:200px;
	margin-top:10px;
	margin-right:15px;
	margin-left:15px;
	margin-bottom:10px;
	float:left;
	background-color:yellow;
}

.row{
	height:70px;
	width:200px;
    display: inline;
}

.column{
	height:70px;
	width:50px;
    display: inline;
    float:left;
}

.photo-div{
	height:50px;
	width:50px;
	background-color:blue;
}

.title-wrap{
	height:20px;
	width: 50px; 
	background:pink;
    text-align: center;
}

<div class="box">
    <div class="row">
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>        
    </div>
    <div class="row">
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>        
    </div>
</div>

Answer 2

试试这个 http://jsfiddle.net/jtx16Lf2/7/

<div id="main">
    <div id="box">
    <script>
         for(var i=0;i<3;i++){
                var image = document.createElement('div');
                var titleBar = document.createElement('div');
                image.className = "photo-div";
                titleBar.className = "title-wrap";
                document.getElementById('box').appendChild(image);
                document.getElementById('box').appendChild(titleBar);
            }
        </script>
    </div>
</div>

CSS

#box{
    height:750px;
    width:200px;
    margin-top:10px;
    margin-right:15px;
    margin-left:15px;
    margin-bottom:10px;
    float:left;
    background-color:yellow;
    position:relative;
}

.photo-div{
    height:50px;
    width:50px;
    background-color:blue;
    margin-left:35%;
    margin-top:20%;
    float:left;
    position:relative;
}

.title-wrap{
    height:40px;
    width: 200px; 
    background:pink;
    margin-top:105%;
    position:relative;
}