请看一下我在JSFIDDLE的代码，我想把所有的框放在div中。我该怎么做？
任何帮助都将不胜感激。
最佳答案
如果您打算水平居中.container，则不应使用float属性，而应通过display和inline-block或inline-table将它们转换为内联框。
然后在父节点上应用：text-align:center，这里是jsfiddle中的body或.grid-main。DEMO
body {
text-align:center;
}
legend {
display: block;
width: 323px;
margin: 0 auto 0 auto;
font-size: 20px;
font-family: sans-serif;
}
body {
}
.grid-main {
width: auto;
margin:auto;
line-height: 12px;
overflow: hidden;
/* border: 1px solid #000; */
}
.grid-sub {
}
.thumb {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
width: 323px;
height: 160px;
background-image: url(fashion.jpg);
background-size: 323px 160px;
}
.clearfix {
margin: 20px;
}
.container {
-webkit-box-shadow: 0px 0px 27px -6px rgba(138, 138, 138, 1);
-moz-box-shadow: 0px 0px 27px -6px rgba(138, 138, 138, 1);
box-shadow: 0px 0px 27px -6px rgba(138, 138, 138, 1);
width: 323px;
height: auto;
margin: 10pt;
border: 1px solid #c0c0c0;
border-radius: 10px;
border-top: none;
display:inline-block;/* NOT FLOAT */
text-align:left;
}
.top-res-box-overlay {
background: rgba(0, 0, 0, .3);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(1%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, .65)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0)0, rgba(0, 0, 0, 0)1%, rgba(0, 0, 0, .65)100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0)0, rgba(0, 0, 0, 0)1%, rgba(0, 0, 0, .65)100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0)0, rgba(0, 0, 0, 0)1%, rgba(0, 0, 0, .65)100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
width: 100%;
height: 100%;
/*position: relative;
*/
display: block;
border-radius: 10px 10px 0 0;
}
div.header {
position: relative;
height: 160px;
width: 323px;
}
.box-name {
font-size: 13pt;
display: block;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, .5);
}
.box-name-desc {
font-size: 10pt;
display: block;
color: #fff;
margin-top: 5px;
font-weight: 100;
text-shadow: 0 0 1px rgba(0, 0, 0, .5);
}
div.header div.title {
position: absolute;
bottom: 0px;
color: #FFF;
font-family: sans-serif;
font-weight: bold;
padding: 10px;
}
.content {
width: 100%;
/*border: 1px solid #c1c1c1;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;*/
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
}
.context {
padding: 10px;
font-size: 13px;
line-height: 150%;
color: #9a9a9a;
font-family: sans-serif;
}<body>
<div class="grid-main">
<div class="container">
<div class="thumb">
<div class="header"> <a href="#" class="top-res-box-overlay"></a>
<div class="title"> <span class="box-name">Header</span>
<span class="box-name-desc">Tagline</span>
</div>
</div>
</div>
<div class="content">
<div class="context">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</div>
</div>
</div>
<div class="container">
<div class="thumb">
<div class="header"> <a href="#" class="top-res-box-overlay"></a>
<div class="title"> <span class="box-name">Header</span>
<span class="box-name-desc">Tagline</span>
</div>
</div>
</div>
<div class="content">
<div class="context">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</div>
</div>
</div>
<div class="container">
<div class="thumb">
<div class="header"> <a href="#" class="top-res-box-overlay"></a>
<div class="title"> <span class="box-name">Title</span>
<span class="box-name-desc">Tagline</span>
</div>
</div>
</div>
<div class="content">
<div class="context">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</div>
</div>
</div>
<div class="container">
<div class="thumb">
<div class="header"> <a href="#" class="top-res-box-overlay"></a>
<div class="title"> <span class="box-name">Title</span>
<span class="box-name-desc">Tagline</span>
</div>
</div>
</div>
<div class="content">
<div class="context">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</div>
</div>
</div>
</div>
</body>关于html - 我如何从下面的代码中将元素放在div中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29039001/