【发布时间】：2017-08-25 04:43:04
【问题描述】：
我不知道如何将我的图像容器放在我的列中。另外由于某种原因，即使所有设置都与其他两个完全一样，中间的图片也不会显示，是否有某种原因会发生这种情况？
此外，无论出于何种原因，我的列在使用 google chrome 时格式不正确。我认为 -webkit- 应该可以解决这个问题？
.columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
column-gap: 20px;
}
.columns-format {
display: inline-block;
width: auto;
}
.image-container {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: auto;
}
.image-container hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);<div class="columns">
<div class="columns-format">
<h4>Professionals</h4>
<p>As Northeast Ohio Landscapers, Landscaping Company has been caring for customers and their properties throughout Cuyahoga County since 1981.</p>
<p>Our core values:
<ul>
<li>Bring a positive attitude with you each and every day</li>
<li>Work hard, pitch in, be helpful and productive</li>
<li>Be fair and respectful with all people in all encounters</li>
</ul>
</p>
<div class="image-container">
<a target="_blank" href="images/stairwell.jpg">
<img src="images/stairwell.jpg" width="250px" height="200px">
</a>
</div>
</div>
<div class="columns-format">
<h4>Services</h4>
<p>Whether you are new to Cuyahoga County, switching landscape service providers, or need to add a service to your existing account, Landscaping Company makes it easy for you.</p>
<p>Experienced in every facet of the landscape industry, we fulfil our one goal - total care philosophy by meeting your every need in the following areas:</p>
<p>Residential Landscape</p>
<p>Maintenance Landscape</p>
<p>Design/Installation</p>
<p>Plant Health Care</p>
<div class="image-container">
<a target="_blank" href="images/flowers.jpg">
<img src="images/flowers.jpg" width="250px" height="200px">
</a>
</div>
</div>
<div class="columns-format">
<h4>Mission</h4>
<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.</p>
<p>Our mission is to unite people in positive relationships to improve lives.</p>
<p>This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day.</p>
<p>If we are not improving your life then we are not living up to our mission.</p>
</div>
<div class="image-container">
<a target="_blank" href="images/lighting.jpg">
<img src="images/lighting.jpg" width="250px" height="200px">
</a>
</div>
</div>【问题讨论】：
-
准备小提琴？ sn-ps 很难处理
-
@Siddharth jsfiddle.net/babws8k3 我注意到 sn-ps 很糟糕，除非您将其扩展到全屏。无论出于何种原因，它在 Google Chrome 中看起来也很奇怪，因此如果您使用 IE 或 FireFox，它看起来会更好。我不知道如何解决它。
-
知道了，加了答案，看看
标签： html css css-multicolumn-layout