Question

我目前有一个博客，需要在一行中显示个人资料（代理商风格）列表4，我设计了网站，以便在响应时，我希望这些个人资料能够起作用。此时它可以正常工作，但是当使用50％没有边距但是它们之间的空格为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“

所有这一切，这是基本理论，看你在大多数情况下可能更喜欢将max和min宽度应用于包含元素，因此你的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 */}

CSS边距不能正常使用百分比？

1 个答案: