我今天从我们的设计师那里获得了一个PSD,其布局如下:
他们希望包括3个均匀分布的圆圈,这些圆圈也必须具有响应性。到目前为止,我尝试的每个解决方案都失败了。
目前我的代码如下:
CSS(从SCSS编译)
.section2 .info-box {
float: left;
display: block;
margin-right: 10.1484%;
width: 26.56773%; }
/* line 89, /Users/chriswatson/.rvm/gems/ruby-2.1.5/gems/neat-1.7.2/app/assets/stylesheets/grid/_span-columns.scss */
.section2 .info-box:last-child {
margin-right: 0; }
@media screen and (max-width: 992px) {
/* line 84, /Users/chriswatson/Sites/nuvi-website/source/stylesheets/index.css.scss */
.section2 .info-box {
float: left;
display: block;
margin-right: 38.19821%;
width: 100%;
margin-bottom: 40px;
background-color: rgba(250, 250, 250, 0.1);
padding: 15px; }
/* line 89, /Users/chriswatson/.rvm/gems/ruby-2.1.5/gems/neat-1.7.2/app/assets/stylesheets/grid/_span-columns.scss */
.section2 .info-box:last-child {
margin-right: 0; } }
/* line 94, /Users/chriswatson/Sites/nuvi-website/source/stylesheets/index.css.scss */
.section2 .info-box img {
height: 90px;
margin-bottom: 20px; }
/* line 99, /Users/chriswatson/Sites/nuvi-website/source/stylesheets/index.css.scss */
.section2 .info-box h2 {
font-size: 1.2em; }
/* line 103, /Users/chriswatson/Sites/nuvi-website/source/stylesheets/index.css.scss */
.section2 .info-box p {
font-size: 18px; }
HTML
<div class="full-width">
<h1>A Comprehensive Solution</h1>
<div class="info-box">
<div class="circle">
<img src="/images/timer.png" alt="timer" />
<h2>Real-Time</h2>
<p>NUVI monitors 12 social networks and nearly 4 million RSS feeds in over 20 languages in Real Time.</p>
<button class="learn-more">Learn More</button>
</div>
</div>
<div class="info-box themiddleone">
<div class="circle">
<img src="/images/multi-monitors.png" alt="monitors" />
<h2>Visualizations</h2>
<p>Beautiful visualizations and dashboards make it easy to see actionable insights.</p>
<button class="learn-more">Learn More</button>
</div>
</div>
<div class="info-box">
<div class="circle">
<img src="/images/server.png" alt="server" />
<h2>Reporting</h2>
<p>Beautiful visualizations and dashboards make it easy to see actionable insights.</p>
<button class="learn-more">Learn More</button>
</div>
</div>
</div>
如何让这些圈子显示在上图中?
答案 0 :(得分:0)
您可以使用视口单元
执行此操作
body {
text-align: center;
}
div {
width: 20vw;
height: 20vw;
margin: 2vw;
border-radius: 50%;
background: red;
border: 1px solid grey;
display: inline-block;
}
&#13;
<div></div>
<div></div>
<div></div>
&#13;
答案 1 :(得分:0)
这是您需要的CSS(大约)。当然,您必须根据所需的规范进行媒体查询,但这只是一个示例。要在jsfiddle中测试它,你可以加宽和缩短视图窗口以查看它的变化:
.info-box {
display: inline-block;
width: 29.5%;
height: auto;
border: 1px solid #FFF;
padding: 100px;
}
.circle img {
height: 70vh;
margin-bottom: 20px;
border-radius:50%;
}
@media screen and (max-width: 800px){
.circle img{
height: 40vh;
}
}