- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我的 Rails 应用程序上工作,我试图让我的帖子像这样连续 3 次。 (只有当我注释掉框大小调整、-moz 和 -webkit 时才会发生这种情况;但是我留下了一个水平滚动条,我的侧边导航栏与我的帖子图像重叠) ] 1
我的断点是错误的还是与 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>
最佳答案
解决此问题的方法是确保您没有使用 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;
}
关于css - 框大小或媒体查询创建空白?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33747343/
我有三张 table 。表 A 有选项名称(即颜色、尺寸)。表 B 有选项值名称(即蓝色、红色、黑色等)。表C通过将选项名称id和选项名称值id放在一起来建立关系。 我的查询需要显示值和选项的名称,而
在mysql中,如何计算一行中的非空单元格?我只想计算某些列之间的单元格,比如第 3-10 列之间的单元格。不是所有的列...同样,仅在该行中。 最佳答案 如果你想这样做,只能在 sql 中使用名称而
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 7 年前。 Improve this ques
我正在为版本7.6进行Elasticsearch查询 我的查询是这样的: { "query": { "bool": { "should": [ {
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 7 年前。 Improve this ques
是否可以编写一个查询来检查任一子查询(而不是一个子查询)是否正确? SELECT * FROM employees e WHERE NOT EXISTS (
我找到了很多关于我的问题的答案,但问题没有解决 我有表格,有数据,例如: Data 1 Data 2 Data 3
以下查询返回错误: 查询: SELECT Id, FirstName, LastName, OwnerId, PersonEmail FROM Account WHERE lower(PersonEm
以下查询返回错误: 查询: SELECT Id, FirstName, LastName, OwnerId, PersonEmail FROM Account WHERE lower(PersonEm
我从 EditText 中获取了 String 值。以及提交查询的按钮。 String sql=editQuery.getText().toString();// SELECT * FROM empl
我有一个或多或少有效的查询(关于结果),但处理大约需要 45 秒。这对于在 GUI 中呈现数据来说肯定太长了。 所以我的需求是找到一个更快/更高效的查询(几毫秒左右会很好)我的数据表大约有 3000
这是我第一次使用 Stack Overflow,所以我希望我以正确的方式提出这个问题。 我有 2 个 SQL 查询,我正在尝试比较和识别缺失值,尽管我无法将 NULL 字段添加到第二个查询中以识别缺失
什么是动态 SQL 查询?何时需要使用动态 SQL 查询?我使用的是 SQL Server 2005。 最佳答案 这里有几篇文章: Introduction to Dynamic SQL Dynami
include "mysql.php"; $query= "SELECT ID,name,displayname,established,summary,searchlink,im
我有一个查询要“转换”为 mysql。这是查询: select top 5 * from (select id, firstName, lastName, sum(fileSize) as To
通过我的研究,我发现至少从 EF 4.1 开始,EF 查询上的 .ToString() 方法将返回要运行的 SQL。事实上,这对我来说非常有用,使用 Entity Framework 5 和 6。 但
我在构造查询来执行以下操作时遇到问题: 按activity_type_id过滤联系人,仅显示最近事件具有所需activity_type_id或为NULL(无事件)的联系人 表格结构如下: 一个联系人可
如何让我输入数据库的信息在输入数据 5 分钟后自行更新? 假设我有一张 table : +--+--+-----+ |id|ip|count| +--+--+-----+ |
我正在尝试搜索正好是 4 位数字的 ID,我知道我需要使用 LENGTH() 字符串函数,但找不到如何使用它的示例。我正在尝试以下(和其他变体)但它们不起作用。 SELECT max(car_id)
我有一个在 mysql 上运行良好的 sql 查询(查询 + 连接): select sum(pa.price) from user u , purchase pu , pack pa where (
我是一名优秀的程序员,十分优秀!