Fatal编程技术网
  • css/
  • Css 框大小或媒体查询是否创建空白？

Css 框大小或媒体查询是否创建空白？

css ruby-on-rails

Css 框大小或媒体查询是否创建空白？,css,ruby-on-rails,Css,Ruby On Rails,在我的Rails应用程序上工作，我试图让我的帖子像这样连续3篇。（只有当我注释出框大小，-moz和-webkit时才会发生这种情况；但我留下的是一个水平滚动条，侧导航与帖子图像重叠）] 但由于某些原因，它是两排，有额外的空白 当我在全屏模式下工作时…当我不在全屏模式下时 我的断点是错误的还是与框大小有关：边框框 这是我的posts.scss文件 /* Main */ .main{ width: 100%; height: 100%; padding-left: 300px; -mo

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

但由于某些原因，它是两排，有额外的空白

当我在全屏模式下工作时…当我不在全屏模式下时

我的断点是错误的还是与框大小有关：边框框

这是我的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;}

<%= 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>
<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>
以及我正在使用的响应代码

@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%;
 }}
谢谢你给我的任何帮助

更新

My index.html.erb文件

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

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

My\u header.html.erb文件以防万一

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

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



    

  • 

  •
解决此问题的方法是确保您没有使用
相对定位
或
绝对定位
定位-您最好将
img
元素保持为：

.portfolio{display:block}
.投资组合img{
显示：内联块；
填充：0；
利润率：0-3倍；
}
您还可以提供html结构吗？请尝试设置链接的字体大小：0。由于此属性，图像元素周围经常出现空白。您好，谢谢您的建议@Ilya B。但这并没有移动帖子，它仍然与我的第二张图片相同。但我会继续插入，我缺少一些简单的东西。我似乎无法在JSFiddle中重新创建场景…嘿@Andrew谢谢您的尝试。我认为我的一个rails文件中有错误，而不是scss样式表。所以我只能继续胡闹了。我知道这很简单，我错过了lol。无论如何，再次感谢你的尝试。非常感谢。代码很随意，我和一个朋友都在做。我在后台，他在前台。他在生活中遇到了一些问题，所以我把他所有的工作都留给了我。还有很多事情要清理。无论如何，谢谢你的帮助和链接。我将阅读更多关于内联块和框大小的内容。