使用离子框架将屏幕分成两个部分？

Posted 2023-05-07

【中文标题】使用离子框架将屏幕分成两个部分？

【英文标题】：Split Screen into two division using ionic framwork?

【发布时间】：2015-09-02 20:33:26

【问题描述】：

我使用 ionic 框架创建了一个天气应用程序的演示。在此我使用包含 4 个菜单项的幻灯片菜单（我的城市天气、预测、地图和风和压力）。单击预测菜单会打开一个选项卡视图，其中会打开带有天气信息的城市列表（使用天气 api 与城市代码）。数据显示在列表中，每个城市都有不同的列。但此列表以全页或全屏形式打开。

现在我只想在半页中打开这些城市，从那里我可以滚动城市，在半页上我想打开地图。我尝试了很多做除法，但没有成功。请检查我的代码，如下所示，让我知道我错在哪里。

任何帮助将不胜感激。

这是我的代码：

   auth-signup:
    <ion-header-bar class="bar-positive">
    <h1 class="title">ForeCast</h1>
    </ion-header-bar>

//class avatar defined in style.css for column item design for Forecast.
    <ion-content> <ion-list> <ion-item
    	class="item-avatar" ng-repeat="weather in weatherList"
    	href="#/auth/signup/weather.id" type="item-text-wrap"> 
       <div class="container">
    	<div id="list_div" >
    	<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color:Lime;">
    		<table>
    			<tr>
    		<th><img id="img-view"ng-src="http://openweathermap.org/img/w/weather.weather[0].icon.png">
    		</th>
    		<th>
    		<h2>
    		<font color="#ffffff" style="text-align: center">weather.name</font>
    		</h2>
    		<h2>
    		<font color="#ffffff" style="text-align: center">
    							weather.main.temp°C</font>
    					</h2>
    				</th>

    			</tr>
    		</table>
    	</div>
    </div>
    </ion-item> </ion-list> </ion-content>

// want this class division under under cities list. 
    <div class="map_div">Map View</div>
// style for the image and the text display in list column item.
    <style>
    #img-view 
    	display: block;
    	margin: -10px;
    	width: 40px;
    	height: 40px;
    	margin-left: auto;
    	margin-right: auto;
    
    .list_div 
    	margin-left: -60px;
    	margin-right: auto;
    
    .item-complex .item-content,.item-radio .item-content 
    	background: none;
    
    #rounded-view 
    	margin: 5px;
    	background: rgba(0, 0, 0, .5);
    
    .item-avatar 
    	margin: 5px;
    	background: rgba(0, 0, 0, .5);
    
    #list_div 
    	margin: -5px;
    
    </style>

Style.css

.item-avatar.top-contborder:none
.item-avatar.top-cont imgfloat:left; margin-right:10px; vertical-align:top
.item-avatar.top-cont h1color:#fff;

ul.list_vwpadding:0; margin:0
ul.list_vw lilist-style-type:none; float:left; margin-right:10px; padding-bottom:5px; color:#fff; font-size:16px; width:44%

ul.list_vw.sec_vwmargin-top:10px; display:inline-block

ul.list_vw.sec_vw liwidth:100%

.scroll-content
  background-image:url("../img/app_backgroun.jpg");


.transparent 
    background: transparent !important;

 #container 
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;


#list_div 
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50%;
  background-color:none;
  text-align:center;
  

     #map_div 
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  bottom: 0;
  background-color:green;
  text-align:center;
  color:#FFFFFF;
  

【参考方案1】：

而不是像固定像素那样使用固定视图，而是将其更改为百分比值.. 我发现这很有趣，您在左侧使用边距 -60 px 来显示右侧块.. 而<li> 块是宽度为 100%。将<div> 的宽度保持为 % 格式，例如一侧为 50 %，另一侧为 40 %，以便两者都可以依赖内联以及填充和边距。