Question

使用我的Rails应用程序，我试图让我的帖子像这样排成3行。（只有当我注释掉box-sizing，-moz和-webkit时才会发生这种情况;但我留下了一个水平滚动条，我的侧面导航重叠了我的帖子图像） ![Pic 1 ] 1 < / p>

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

当我在全屏时，它可以正常工作......当我不是全屏模式时

我的断点是错误还是与盒子大小有关：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元素保持为{{ 3}}：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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;
}

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

1 个答案: