HTML – 是否有一种简单的方法可以确保.well项目具有相同的高度和宽度,无论屏幕大小如何？

概述我的主页上有三个.well项目,我不想在内容中填写内容,以确保它们在每个屏幕上都能正确显示.理想情况下,我想要一个CSS解决方案,可以指定它们的高度和宽度相互匹配,无论它们显示在哪个屏幕上(以及它们在窗口缩小时正确堆叠). /* CSS used here will be applied after bootstrap.css */ #benefit-box-1 { padding-top: 我的主页上有三个.well项目,我不想在内容中填写内容,以确保它们在每个屏幕上都能正确显示.理想情况下,我想要一个CSS解决方案,可以指定它们的高度和宽度相互匹配,无论它们显示在哪个屏幕上(以及它们在窗口缩小时正确堆叠).

/* CSS used here will be applIEd after bootstrap.CSS */	#benefit-Box-1 {  padding-top: 1em;  display: inline-block;  text-align: center;  float: left;}#benefit-Box {  padding-top: 1em;  display: inline-block;  text-align: center;  float: left;}#benefit-Box-3 {  padding-top: 1em;  display: inline-block;  text-align: center;  float: left;}#benefit-row-2 {  margin-top: 1px;}.icon-div {  display:inline-block;  text-align: centre;  vertical-align: bottom;  wIDth: 100%;  height: 100%;}.icon-div:before {  content: '';  display: inline-block;  height: 100%;  vertical-align: mIDdle;  margin-right: -0.25em; /* Adjusts for spacing */}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/CSS/bootstrap.min.CSS" rel="stylesheet" /><div >  <div  ID="benefit-row">    <div  ID="benefit-Box-1">      <div >        <div >          <i ></i>          <h1>Collaborate in your sales meetings.</h1>        </div>      </div>    </div>    <div  ID="benefit-Box">      <div >        <div >          <i ></i>          <h1>Direct your team to the best deals</h1>        </div>      </div>    </div>    <div  ID="benefit-Box-3">      <div >        <div >          <i ></i>          <h1>Trust your pipeline forecast</h1>        </div>      </div>    </div>  </div>  <div  ID="benefit-row-2">    <div  ID="benefit-Box-1">      <div >        <div >          <i ></i>          <h1>Helps you target the right contacts</h1>        </div>      </div>    </div>    <div  ID="benefit-Box">      <div >        <div >          <i ></i>          <h1>In-built sales training</h1>        </div>      </div>    </div>    <div  ID="benefit-Box-3">      <div >        <div >          <i ></i>          <h1>Smash your sales targets</h1>        </div>      </div>    </div>  </div></div>

我在这里做了一个bootply：My attempts

解决方法 我设法通过删除井/引导程序标准响应行为并使用Flex方法采用我自己的一些来解决这个问题.如果有人对此感兴趣,那就是bootply： Flex CSS classes to make responsive pages

我使用了目前的信息here来实现这一目标 – 我的盒子上的标准行为是在大型设备上占据屏幕宽度的33％,在中型设备上占50％,在小型设备上占100％.有魅力.

据我所知,它不会对旧版浏览器非常有用(我并不特别关心我的项目),但在现代浏览器上,它的运行方式与计划相符.

总结

以上是内存溢出为你收集整理的HTML – 是否有一种简单的方法可以确保.well项目具有相同的高度和宽度,无论屏幕大小如何？全部内容，希望文章能够帮你解决HTML – 是否有一种简单的方法可以确保.well项目具有相同的高度和宽度,无论屏幕大小如何？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。