盒子大小或媒体查询创建空白？

Question

在我的 Rails 应用程序上工作，我试图让我的帖子像这样连续 3 个。 （只有在我注释掉 box-sizing、-moz 和 -webkit 时才会发生这种情况；但我留下了一个水平滚动条，我的侧导航与我的帖子图像重叠）]1

但由于某种原因，它是 2 行，带有额外的空白

当我处于全屏模式时，它可以工作...当我不处于全屏模式时

我的断点是错误的还是与 box-sizing:border-box 有关？

这是我的 posts.scss 文件

/*  Main  */
 .main{
 width: 100%;
 height: 100%;
 padding-left: 300px;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;     
 box-sizing: border-box;
 position: relative;
 z-index: 55;
 background: #f6f6f6;
 clear: both;}

/*  Home/portfolio  */
 .main .work{
 display: block;
 //width: 33.33%;   
 height: auto;
 float: left;
 position: relative;
 overflow: hidden;}

 .main .work .media{
 width: 100%;
 vertical-align: middle;}

 .main .work .caption{
 //position: absolute;           
 display: block;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background: #ffffff;
 opacity: 0;}


 .main .work a:hover .caption{
 opacity: 1;}


 .work .caption .work_title{
 display: block;
 width: 100%;
 position: absolute;
 text-align: center;
 top: 50%;
 margin-top: -40px;}

 .main .work .caption h1{
 position: relative;
 display: inline-block;
 max-width: 90%;
 padding: 20px 0;
 z-index: 77;
 color: #454545;
 font-family: "raleway-regular", arial;
 font-size: 16px;
 letter-spacing: .5px;
 border-bottom: 1px solid #bfbbbb;
 border-top: 1px solid #bfbbbb;}

 img.post {
 width: 372px;
 height: 380px;}

以及我正在使用的响应式代码

@media (max-width:1099px){

 header{
     display: block;
     width: 100%;
     min-height: 100px;
     padding: 0;
     position: relative;
 }
 header .logo{
     margin: 40px 0 0 30px;
     float: left;
 }
 header .footer{
     display: none;
 }
 header #menu_icon,
 header .close_menu{
     float: right;
     margin: 30px 30px 0 0;
 }

 header nav{
     width: 100%;
     position: absolute;
     top: 100px;
     left: 0;
     z-index: 9999;
 }

 header nav ul{
     list-style: none;
     display: none;
     position: relative;
 }
 header nav ul li a{
     display: block;
     width: 100%;
     padding: 30px 0;
     text-align: center;
     color: #454545;
     font-family: "raleway-regular", arial;
     font-size: 14px;
     text-decoration: none;
     border-top: 1px solid #f7f5f5;
     background: #fff;
 }
 header nav ul li a:active{
     background: #f7f5f5;
 }
 #menu_icon,
 .close_menu,
 .show_menu{
     display: block;
 }
 .show_menu{
     display: block;
 }

 .main .work{
     width: 50%;
 }
 .main{
     width: 100%;
     position: relative;
     padding-left: 0;
 }
 #map{
     margin: 0!important;
 }}

 @media (max-width:550px){
  .main .work{
     width: 100%;
 }}

感谢您为我提供的任何帮助！

更新

我的 index.html.erb 文件

<%= render "partials/header" %>
 <section class="main clearfix">
  <div class="work">
   <a href="">
    <img src="" class="media" alt=""/>
     <h1 class="current-category"><%= params[:category] %></h1>
       <% if @posts.count == 0 %>

         <h1>There are no Post currently in this category</h1>

       <% else %>

         <% @posts.each do |post| %>
           <a href="/posts/<%= post.id %>">
             <%= image_tag post.post_img.url(:post_index), class:  "post" %>
           </a>
         <% end %>

       <% end %>
   <div class="caption">
     <div class="work_title">
     </div>
   </div>
 </a>

我的 _header.html.erb 文件只是装箱

<header>
<div class="logo">
 <a href="index.html"><img src="img/logo.png" title="" alt=""/></a>
</div><!-- end logo -->


<div id="menu_icon"></div>
 <nav>
  <ul>
   <li><a href="index.html" class="selected">Home</a></li>
   <li><a href="#"><%= link_to "Add Post", new_post_path %></a></li>
  </ul>
 </nav><!-- end navigation menu -->
</header>

Answer 1

解决此问题的方法是确保您没有使用 relative 或 absolute 定位 - 您最好将您的 img 元素保留为 display: inline-block;：

.portfolio { display: block }
.portfolio img {
    display: inline-block;
    padding: 0;
    margin: 0 0 0 -3px;
}

<div class="portfolio">
    <a href="/"><img src="http://placehold.it/200" /></a>
    <a href="/"><img src="http://placehold.it/200" /></a>
    <a href="/"><img src="http://placehold.it/200" /></a>
</div>

其中一个问题是inline-block 被视为inline，并且有一些自动margin 应用于元素。您可以通过using negative margin 摆脱它。

box-sizing 只是定义了元素的大小。无论元素的大小如何计算，您仍然会遇到对齐问题。

---

您的代码很随意，为什么要调用<a href=""> 然后在其中嵌入另一个链接？

我会做以下事情：

<%= render "partials/header" %>

<section class="main clearfix">
<div class="work">
   <h1 class="current-category"><%= params[:category] %></h1>
   <% if @posts.count == 0 %>
      <h1>There are no Post currently in this category</h1>
   <% else %>
      <% @posts.each do |post| %>
        <%= link_to post do >
           <%= image_tag post.post_img.url(:post_index), class:  "post" %>
        <% end %>
      <% end %>
   <% end %>
</div>


.main .work a.post img {
   display: inline-block
   margin: 0 0 0 -3px;
}