CSS边距不能与百分比一起正常工作？

Question

我目前有一个博客需要在一行中显示 4 个配置文件（代理风格）列表，我已经设计了网站，以便在其响应时，并且我希望这些配置文件能够响应地工作。此时它可以工作，但是当使用 50% 没有边距时，但 id 像它们之间的 10px 空格时，当这些边距用下面的代码添加时，它们不对齐，请参见 jfiddle。

http://jsfiddle.net/b0rrz8bg/

CSS

.new-agency-clients{
position: relative; 
border-radius:6px; 
background:#fcfbfc !important; 
background:-webkit-gradient(linear,left top,left bottom,from(#fcfbfc),to(#f7f6f7)) !important; 
background:-webkit-linear-gradient(#fcfbfc,#f7f6f7) !important;
background:-moz-linear-gradient(center top,#fcfbfc 0,#f7f6f7 100%) !important; 
background:-moz-gradient(center top,#fcfbfc 0,#f7f6f7 100%) !important; 
width:940px; 
height: 100%; 
box-shadow:0 0 3px #444; 
-moz-box-shadow:0 0 3px #444; 
-webkit-box-shadow:0 0 3px #444; 
padding-top: 10px; 
margin-top:10px; 
margin-bottom:10px; 
}

.new-agency-clients-box {
overflow:hidden;
}

.new-agency-clients-box .entry-profile {
bottom:0;
top:0;
left:0;
right:0;
margin-left:10px; 
margin-bottom: 10px;
float:left; 
position:relative; 
width: 225px; 
height: 270px; 
background: #ffffff; 
border-radius: 6px; 
overflow:hidden; 
box-shadow:0 0 3px #444; 
-moz-box-shadow:0 0 3px #444; 
-webkit-box-shadow:0 0 3px #444; 
}

.new-agency-clients-box .entry-profile .profilename { 
margin-top: -35px; 
line-height: 26px; 
height: 28px;
width: 100%; 
background:#cccccc; 
background:-webkit-gradient(linear,left top,left bottom,from(#eeeeee),to(#cccccc)); background:-webkit-linear-gradient(#eeeeee,#cccccc); 
background:-moz-linear-gradient(center top,#eeeeee 0,#cccccc 100%); 
background:-moz-gradient(center top,#eeeeee 0,#cccccc 100%); 
color: #444; 
display: block; 
font-size: 14px; 
font-weight: bold; 
position: relative; 
border-radius: 0px !important; 
}

.new-agency-clients-box .entry-profile .profile-box-image{ 
background: #0e0e0e !important; 
width: 225px; 
height: 270px; 
margin-bottom: 10px; 
cursor: pointer; 
position: relative; 
}

.new-agency-clients-box .entry-profile .profile-box-image:hover{ 
filter: alpha(opacity=60,Style=0); 
opacity: 0.6; 
cursor: pointer; 
}

.new-agency-clients-box .entry-profile .profile-box-image a img{ 
width: 225px; 
height: 270px; 
position: absolute;
margin: auto; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
}

.new-agency-clients-box .entry-profile .profile-box-image a img.default{
width: 225px; 
height: auto; 
position: absolute; 
margin: auto; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
}

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

.wrap {width: auto;} 
.new-agency-clients {width: 100%;}
.new-agency-clients-box .entry-profile {width: 50%; height: 50%;}

}

HTML

<div class="new-agency-clients">
<div class="new-agency-clients-box">

<div class="entry-profile">

<div class="profile-box-image">
<a href="" rel="bookmark">
<img width="700" height="875" src="" class="attachment-post-thumbnail wp-post-image" alt="" />  
</a> 
</div>
<center>
    <div class="profilename">
        <h6><a href="" rel="bookmark" title="">Profile</a></h6>
    </div>
</center>
</div>

<div class="entry-profile">

<div class="profile-box-image">
<a href="" rel="bookmark">
<img width="700" height="875" src="" class="attachment-post-thumbnail wp-post-image" alt="" />  
</a> 
</div>
<center>
    <div class="profilename">
        <h6><a href="" rel="bookmark" title="">Profile</a></h6>
    </div>
</center>
</div>    

<div class="entry-profile">

<div class="profile-box-image">
<a href="" rel="bookmark">
<img width="700" height="875" src="" class="attachment-post-thumbnail wp-post-image" alt="" />  
</a> 
</div>
<center>
    <div class="profilename">
        <h6><a href="" rel="bookmark" title="">Profile</a></h6>
    </div>
</center>
</div>    

<div class="entry-profile">

<div class="profile-box-image">
<a href="" rel="bookmark">
<img width="700" height="875" src="" class="attachment-post-thumbnail wp-post-image" alt="" />  
</a> 
</div>
<center>
    <div class="profilename">
        <h6><a href="" rel="bookmark" title="">Profile</a></h6>
    </div>
</center>
</div>    

</div>
</div>

Answer 1

虽然您的响应式布局方法有很多需要讨论的地方，但在您的具体情况下，只需这样做：

@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% MINUS 您想要的边距，瞧，它就像魔术一样工作。我有forked your fiddle，所以你可以到处玩

编辑：根据评论包含新代码

更改此 HTML

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

对此（我们正在从标记中删除宽度和高度，无论如何，你不应该使用）：

<img src="" class="attachment-post-thumbnail wp-post-image" alt="" />

现在，在您的 CSS 中，就这么简单：

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

看到我们也可以使用 width:auto; height:100%; max-height:875px 并像这样限制最小高度或宽度 width:auto; height:100%; max-height:875px; min-height:200px /* or restrict the width if you want */ 。所有方法虽然相对相似，但在调整大小时具有不同的行为，但它们都是响应式的，因此请使用您的代码对其进行测试，看看您更喜欢哪个项目适合您的项目。

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

说了这么多，这是基本理论，在大多数情况下你可能更喜欢将最大和最小宽度应用于包含元素，所以你的 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 */}