我不知道如何将图像容器居中放置在列中。同样由于某种原因,即使所有设置都完全正确,中间的图片也不会显示,这是不是有些原因呢?
另外,无论出于何种原因,使用谷歌浏览器时我的列均无法正确格式化。我以为-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>
我可以建议您使用flexbox
代替columns
。
columns
旨在使文本和图像在一定数量的列上动态分布,并且您的示例看起来更多为3列,其内容应包含在每列中,而columns
事实并非如此。
要使图像/列不重叠,请提供columns-format
最小宽度(在下面的示例中),将图像大小设置为百分比,包装列等。
.columns {
display: flex;
justify-content: space-between;
}
.columns-format {
display: inline-block;
width: 30%;
min-width: 300px;
}
.image-container {
text-align: center;
}
.image-container a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: box-shadow 0.3s;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.image-container a: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:</p>
<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>
<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 class="image-container">
<a target="_blank" href="images/lighting.jpg">
<img src="images/lighting.jpg" width="250px" height="200px">
</a>
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句