Question

我正在尝试在响应式设计中垂直对齐两个div。一个div包含图像，另一个包含文本。我希望它们能够保持几乎所有大屏幕尺寸的对齐。几乎所有大屏幕上两个div的高度必须相同。

这里是小提琴的链接：http://jsfiddle.net/Bangash/4cLQa/

，下面给出了html和css。

CSS goes here
.box { float: left; font-size:15px;font-family:'fsl'; }
#main { width: 100%; }
#intro { width: 67%;}
#box-inside1{margin-top:2em;margin-left:2em;}
#slider-small { width: 33%; float:right;position: relative; padding:0; margin:0; }
#left { width: 50%;margin-right:4em;padding-bottom:3px;min-height:256px; }
#right { width: 40%;}

并且HTML在这里

<div class="box" id="main">
<div class="box" id="intro" style="background-color:#eae7e7;">
<div class="box" id="box-inside1">
<h3>IOC OFFICE 600SQM (EPC PROJECT)</h3>
Lead times:
<ul>
<li>Design &ndash; 4 weeks</li>
<li>Procure &ndash; 10 weeks</li>
<li>Construct (Shell and Core) &ndash; 16 weeks</li>
<li>Fit and Furnish &ndash; 16 weeks</li>
</ul>
Components:
<ul>
<li>Pre-fabricated steel structure</li>
<li>300 sqm - Two Levels</li>
<li>Overhead Protection of ground floor</li>
<li>100% local contractors for civil works, construction, fit &amp; furnish</li>
</ul>
<a href="#" id="dl-text">Download floor plan <span id="dl-icon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></a></div>
</div>
<div class="box" id="slider-small"><img src="http://atom.norseone.com/wb/media/property/case/1.jpg" width="100%" alt="" /></div>
</div>

请帮助我。感谢

Answer 1

height: 50vw;

或

height: 50vh;

这些应该是响应性的，但要尝试它们两个，因为它们会做不同的事情。我确定其中一个就是你要找的东西。

在响应式设计中垂直对齐两个div

1 个答案: