尝试以 3(宽)x 水平对齐图像/联系人，但很多(长)。目前的外观是阶梯状的，而不是水平的。
使用下面的代码并将 float: left; 切换为 display: inline-block; 和其他一些代码，结构保持“步进式”。
有什么想法可以纠正这个问题，或者代码中是否有什么非常错误的地方？
index.html.erb
<html>
<head></head>
<style>
body {margin:20px; }
.polaroid {
float: left;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: 5px;
border: 1px solid #ccc;
width: 180px;
}
.polaroid:hover {
border: 1px solid #777;
}
.container {
width: auto;
height: auto;
text-align: left;
padding: 10px 27px;
}
.work {
width: 100;
height: 100;
min-width: 100%;
min-height: 100%;
border-radius: 50%;
overflow: hidden;
padding:5px 4px;
}
</style>
<body>
<div>
<%if user_signed_in? %>
<%= link_to 'Log out', destroy_user_session_path, method: :delete %>
<%end%>
</div>
<% if @contacts.any? %>
<% @contacts.each do |contact| %>
<div class="polaroid">
<div class="container">
<%= link_to image_tag(contact.image.url(:thumb), :class=>"work" ), contact_path(contact) %>
<h3><%=contact.firstname%> <%=contact.surname%></h3>
<%=contact.email%><br />
<%=contact.phone%>
</div>
</div>
<br />
<br />
<%end%>
<%else%>
No contacts yet!
<%end%>
<br />
<br />
<%= link_to 'Add a contact', new_contact_path%>
</body>
</html>
最佳答案
顶部父级 (.polaroid) 的宽度固定为 180px，因此图像会相互缠绕，因为该宽度不足以容纳 3 张图像，我建议将其移除，除非您想要图片占该固定宽度的 33.33%。
未定义宽度示例:
body {margin:20px; }
.polaroid {
float: left;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: 5px;
border: 1px solid #ccc;
}
.polaroid:hover {
border: 1px solid #777;
}
.container {
width: auto;
height: auto;
text-align: left;
padding: 10px 27px;
}
.work {
border-radius: 50%;
padding:5px 4px;
}<div class="polaroid">
<div class="container">
<img class="work" src="http://placehold.it/60x60" alt="">
<img class="work" src="http://placehold.it/60x60" alt="">
<img class="work" src="http://placehold.it/60x60" alt="">
</div>
</div>图像相对于父级的宽度 (33.33%) 示例:
body {margin:20px; }
.polaroid {
float: left;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: 5px;
border: 1px solid #ccc;
width: 180px;
}
.polaroid:hover {
border: 1px solid #777;
}
.container {
width: auto;
height: auto;
text-align: left;
padding: 10px 27px;
}
.work {
border-radius: 50%;
padding:5px 4px;
width: 33.33%;
height: auto;
box-sizing: border-box;
margin: -2px;
}<div class="polaroid">
<div class="container">
<img class="work" src="http://placehold.it/60x60" alt="">
<img class="work" src="http://placehold.it/60x60" alt="">
<img class="work" src="http://placehold.it/60x60" alt="">
</div>
</div>附加说明:
-
CSS 中的
Width/Height属性必须具有带有unit 的值，您写道:height: 100;那是错误的，它必须是100px或100%例如。尝试提供编译后的 HTML 而不是 .ERB
关于CSS - 无法在 3 秒内水平对齐图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38028779/