我的问题是，当我将6个div与文本和图像分成2行时，它应该是这样的。 http://2.firepic.org/2/images/2015-08/17/wv2fu4foh87c.png
但是当我添加
@media screen and (min-width:1000px){
.container {
width: 940px;
margin: 0 auto;
overflow:hidden;}
}
并尝试调整窗口大小，这就是正在发生的事情
http://2.firepic.org/2/images/2015-08/17/u06pnsn3elx3.png
这是我的代码
<div class="container">
<div class="work-wrap ">
<div class="work-item icon1">
<h5 class="title">Select a piece of jewelry that you like.</h5>
<p>You can choose your size, decoration material (silver, gold)</p>
</div>
<div class="work-item icon2">
<h5 class="title">Make decoration unique.</h5>
<p>You can write a variety of phrases, change shape, and even adjust the polishing.</p>
</div>
<div class="work-item icon3">
<h5 class="title">Payment methods chosen decorations.</h5>
<p>You can use a credit card, and other convenient for you.</p>
</div>
<div class="work-item icon4">
<h5 class="title">Above decoration will be ready within 3-7 days.</h5>
<p>On this site you can choose the most convenient way for delivery.</p>
</div>
<div class="work-item icon5" >
<h5 class="title">You have successfully passed all the menu items.</h5>
<p>We beautifully pack and deliver your decoration in our signature box.</p>
</div>
<div class="work-item icon6">
<h5 class="title">Wear purchased item with pleasure.</h5>
<p>As credit cards, and other convenient for you.</p>
</div>
</div>
</div>
和CSS
.work-wrap {
overflow: hidden;
display: inline-block;
margin-bottom: 220px;
}
h5.title {
margin-bottom: 20px;
text-align: left;
font: 18px/18px robotobold;
color: #464646;
width: 100%;
}
.work-item {
float: left;
width: 33.33%;
padding: 90px 8px;
}
.icon1 {
background: url('D:/htmlCss/jewelery/img/icon1.png') no-repeat left top;
}
.icon2 {
background: url('D:/htmlCss/jewelery/img/icon2.png') no-repeat left top;
}
.icon3 {
background: url('D:/htmlCss/jewelery/img/icon3.png') no-repeat left top;
}
.icon4 {
background: url('D:/htmlCss/jewelery/img/icon4.png') no-repeat left top;
}
.icon5 {
background: url('D:/htmlCss/jewelery/img/icon5.png') no-repeat left top;
}
.icon6 {
background: url('D:/htmlCss/jewelery/img/icon6.png') no-repeat left top;
}
我该如何解决？
答案 0 :(得分：1)
Matias是对的，但如果你愿意，可以试试Bootstrap的grid system。
两行，每行有三列，你准备好了。
编辑：
<div class="container">
<div class="row">
<div class="col-md-4">column 1</div>
<div class="col-md-4">column 2</div>
<div class="col-md-4">column 3</div>
</div>
<div class="row">
<div class="col-md-4">column 4</div>
<div class="col-md-4">column 5</div>
<div class="col-md-4">column 6</div>
</div>
</div>
答案 1 :(得分：1)
使用您的宽度和填充，第三列会下降，因为您必须考虑身体的边距和填充或其他外部标记。
.work-wrap {
overflow: hidden;
display: inline-block;
margin-bottom: 220px;
text-align: center;
}
.work-item {
display: inline-block;
width: 32%;
padding: 90px 8px;
text-align: left;
}
答案 2 :(得分：0)
尝试使用此规则
.work-item {
/*float: left;*/
width: 33.33%;
padding: 90px 8px;
display: inline-block;
vertical-align: top;
}
答案 3 :(得分：0)
这是flexbox，它在定位和重新调整我的div方面给我带来了很多麻烦。因此，我已经减少了很多@media查询：
.work-wrap{
display: -webkit-flex;
position: relative;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-content: flex-end;
align-content: flex-end;
}
.work-item{
width: 33%;
height: 33%;
}
答案 4 :(得分：0)
只需使用
void readLUT()
{
unsigned char charnum[256], line[32], *linep, c;
FILE *fpwv, *fprt;
struct csoln *p;
int d, i, j, k, kk, ns, nn;
init_param();
for (i=0; i<=255; i++) {
if ('0'<=i && i<='9')
charnum[i] = i - '0';
else if (i>='A')
charnum[i] = i - 'A' + 10;
else // if (i=='$' || i=='\n' || ... )
charnum[i] = 0;
}
fpwv=fopen(POWVFILE, "r");
if (fpwv == NULL) {
printf("Error in opening %s\n", POWVFILE);
exit(1);
}
#if ROUTING==1
fprt=fopen(POSTFILE, "r");
if (fprt == NULL) {
printf("Error in opening %s\n", POSTFILE);
exit(1);
}
#endif
for (d=4; d<=D; d++) {
fscanf(fpwv, "d=%d\n", &d);
#if ROUTING==1
fscanf(fprt, "d=%d\n", &d);
#endif
for (k=0; k<numgrp[d]; k++) {
ns = (int) charnum[fgetc(fpwv)];
if (ns==0) { // same as some previous group
fscanf(fpwv, "%d\n", &kk);
numsoln[d][k] = numsoln[d][kk];
LUT[d][k] = LUT[d][kk];
}
else {
fgetc(fpwv); // '\n'
numsoln[d][k] = ns;
p = (struct csoln*) malloc(ns*sizeof(struct csoln));
LUT[d][k] = p;
for (i=1; i<=ns; i++) {
linep = (unsigned char *) fgets((char *) line, 32, fpwv);
p->parent = charnum[*(linep++)];
j = 0;
while ((p->seg[j++] = charnum[*(linep++)]) != 0) ;
j = 10;
while ((p->seg[j--] = charnum[*(linep++)]) != 0) ;
#if ROUTING==1
nn = 2*d-2;
fread(line, 1, d-2, fprt); linep=line;
for (j=d; j<nn; j++) {
c = charnum[*(linep++)];
p->rowcol[j-d] = c;
}
fread(line, 1, nn/2+1, fprt); linep=line; // last char \n
for (j=0; j<nn; ) {
c = *(linep++);
p->neighbor[j++] = c/16;
p->neighbor[j++] = c%16;
}
#endif
p++;
}
}
}
}
}
答案 5 :(得分：0)
所以问题是一些数学计算......
工作项的宽度为33.33％，超出宽度：容器中的940px为314px +填充：90px 8px因此其添加16px达到330px和3乘以990px因此三个元素比容器本身大。这就是为什么你得到额外的一线。
建议;
再次做你的数学： 100％/ 3 = 33.33％但是你需要一个PADDING 所以三个项目之间需要2个装订线，让你用
.work-item{
float: left;
width: 31.33%;
padding: 90px 8px;
}