Html CSS页边距不'；不能正确使用百分比？

我目前有一个博客，它需要在一行中显示个人资料（机构风格）列表4，我已经设计了网站，以便在其响应时，我希望这些个人资料能够响应工作。在这个时候它可以工作，但是当使用50%没有边距时，但是我想它们之间的空格是10px，当这些边距与下面的代码一起添加时，它们不对齐，请参见jfiddle

CSS

。新代理客户{
位置：相对位置；
边界半径：6px；
背景：#fcfbfc！重要；
背景：-webkit渐变（线性、左上、左下、从（#fcfbfc）到（#f7f6f7））！重要；
背景：-webkit线性梯度（#fcfbfc，#f7f6f7）！重要；
背景：-莫兹线性梯度（中心顶部，#fcfbfc 0，#f7f6f7 100%）！重要；
背景：-莫兹梯度（中上，#fcfbfc 0，#f7f6f7 100%）！重要；
宽度：940px；
身高：100%；
盒影：0 0 3px#444；
-moz盒阴影：0 0 3px#444；
-网络工具包盒阴影：0 0 3px#444；
填充顶部：10px；
边缘顶部：10px；
边缘底部：10px；
}
.新机构客户箱{
溢出：隐藏；
}
.新机构客户箱.输入配置文件{
底部：0；
排名：0；
左：0；
右：0；
左边距：10px；
边缘底部：10px；
浮动：左；
位置：相对位置；
宽度：225px；
高度：270px；
背景：#ffffff；
边界半径：6px；
溢出：隐藏；
盒影：0 0 3px#444；
-moz盒阴影：0 0 3px#444；
-网络工具包盒阴影：0 0 3px#444；
}
.new agency Client box.entry profile.profilename{
利润上限：-35px；
线高：26px；
高度：28px；
宽度：100%；
背景:#中交;；
背景：-网络工具包渐变（线性、左上、左下、从（#eeeeee）到（#cccccc））；背景：-网络工具包线性渐变（#eeeeee，#cccccc）；
背景：-莫兹线性梯度（中上，#eeeeeee 0，#cccc 100%）；
背景：-莫兹梯度（中上，#EEEEEEE 0，#CCCC 100%）；
颜色：#444；
显示：块；
字体大小：14px；
字体大小：粗体；
位置：相对位置；
边界半径：0px！重要；
}
.new agency Client box.entry profile.profile box图像{
背景：#0e0e！重要；
宽度：225px；
高度：270px；
边缘底部：10px；
光标：指针；
位置：相对位置；
}
.new agency Client box.条目配置文件.配置文件框图像：悬停{
过滤器：alpha（不透明度=60，样式=0）；
不透明度：0.6；
光标：指针；
}
.new agency Client box.entry profile.profile box图像a img{
宽度：225px；
高度：270px；
位置：绝对位置；
保证金：自动；
排名：0；
左：0；
右：0；
底部：0；
}
.new agency Client box.entry profile.profile box图像a img.default{
宽度：225px；
高度：自动；
位置：绝对位置；
保证金：自动；
排名：0；
左：0；
右：0；
底部：0；
}
@仅介质屏幕和（最大宽度：750px）{
.wrap{width:auto；}
.新代理客户{宽度：100%；}
.新代理客户框。输入配置文件{宽度：50%；高度：50%；}
}

HTML

---

虽然您对响应性布局的方法还有很多需要讨论的地方，但在您的具体情况下，只需执行以下操作：

@media only screen and (max-width: 750px) {

.wrap {width: auto;} 
.new-agency-clients {width: 100%;}
.new-agency-clients-box .entry-profile {width: calc( 50% - 10px ) ; height: auto}

}

CSS页边距工作正常，但是如果您有50%+10px，那么很明显元素将占用50%+，从而换行到下一行。因此，我们使用

calc

使这些元素减去你想要的利润率的50%，瞧，这就像魔术一样。我有，你可以到处玩

编辑：根据注释包括新代码

更改此HTML

<img width="700" height="875" src="" class="attachment-post-thumbnail wp-post-image" alt="" />

我们也可以使用

width:auto；身高：100%；最大高度：875px

并像下面这样限制最小高度或宽度

宽度：auto；身高：100%；最大高度：875px；最小高度：200px/*或限制宽度（如果需要）*/

。所有方法虽然相对相似，但在调整大小方面有不同的行为，但它们都是响应性的，所以请使用您的代码测试它们，看看您更喜欢哪个方法用于您的项目

使用一个并调整大小，看看元素的行为，你就会明白这是多么容易，这只是，例如，“图像将采取100%的包含元素，自动调整到最大宽度700px和最小宽度200px”

所有这些都是基础理论，在大多数情况下，您可能更喜欢对包含的元素应用max和min width，因此您的CSS将略有变化，一切都将变得更加简单

.entry-profile{width: calc( 25% - 10px ) /* 4 columns! */ ; max-width:700px; min-width:200px}
.entry-profile .wp-post-image{width:100%; height:auto; /* responsive scalable images no matter the size of container */}

---

请将其精简为再现问题所需的最小代码集。我想你已经在试图追踪它的过程中做到了吗？@torazaburo，他确实添加了准确的最小代码来描述他的行为issue@Fabio我相信你的话，对我来说，这里似乎有很多多余的东西。非常感谢法比奥：）我想知道你是否能帮我处理上面的代码，因为我还有一个问题，百分比不是我的事，但我正试图让图像显示所有内容的全宽和全高。入口配置文件是，图像总是相同的大小，并且不适合。入口配置文件div这就是为什么我说“您的响应布局方法留下了很多讨论”；）幸运的是，这并不困难，请记住，您需要使用相对度量而不是固定度量（您可以将其用于最小和最大度量，除非设计绝对需要，否则不固定）。在您的情况下，它与答案中的编辑一样简单（我很容易包含代码）

.entry-profile .wp-post-image{width:100%; height:auto; max-width:700px;}

.entry-profile{width: calc( 25% - 10px ) /* 4 columns! */ ; max-width:700px; min-width:200px}
.entry-profile .wp-post-image{width:100%; height:auto; /* responsive scalable images no matter the size of container */}