Используйте абсолютное позиционирование, разделите их, используя проценты.
попробуйте ниже фрагмент кода.
.topnav {
background-color: #F2C369;
overflow: hidden;
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: red;
color: white;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.div-container {
display: inline-block;
box-sizing: border-box;
background-color: greenyellow;
width: 70%;
position: relative;
left: 15%;
border: 1px solid red;
clear: both;
}
.left-div {
background-color: lightyellow;
width: 20%;
float: left;
border: 1px solid black;
position: absolute;
left: 0px;
}
.right-div {
background-color: lightyellow;
padding: 10px;
border: 1px solid black;
position: absolute;
right: 0px;
width: 75%;
}
.introduction {
border: 1px solid black;
max-width: 100%;
padding: 10px;
}
<div class="topnav">
<a class="active" href="index.html">Home</a>
<a href="all-articles.html">All articles</a>
<a href="gallery.html">Gallery</a>
<a href="contact.html">Contact</a>
<a href="#about">About</a>
</div>
<div class="div-container">
<div class="left-div">
<p>Links</p>
<p>Links go here</p>
</div>
<div class="right-div">
<div class="introduction">
<h2>Introduction to webpage</h2>
<p>Lorem ipsum dolor sit amet, ex animal incorrupte
vel, fuisset fierent ut eam, per semper corrumpit
adversarium ut. Accumsan adversarium mei ei. Has
ne veniam inermis dissentias, id sed nibh
legendos. Vix vivendo scriptorem definitionem ut.
Cum delenit inimicus et, vis homero libris
nostrud cu. Sed ei utamur honestatis interesset,
eu utroque ancillae has. Usu ea habeo iusto,
rebum cetero elaboraret duo ei. Sea oratio dicant
dissentiet cu.orem ipsum dolor sit amet, ex
animal incorrupte vel, fuisset fierent ut eam,
per semper corrumpit adversarium ut. Accumsan
adversarium mei ei. Has ne veniam inermis
dissentias, id sed nibh legendos. Vix vivendo
scriptorem definitionem ut.
</p>
</div>
</div>
</div>
Я был в состоянии заставить его работать путем разделения на подклассы UITabBarController и использования частных классов:
@interface UITabBarController (private)
- (UITabBar *)tabBar;
@end
@implementation CustomUITabBarController
- (void)viewDidLoad {
[super viewDidLoad];
CGRect frame = CGRectMake(0.0, 0.0, self.view.bounds.size.width, 48);
UIView *v = [[UIView alloc] initWithFrame:frame];
[v setBackgroundColor:kMainColor];
[v setAlpha:0.5];
[[self tabBar] addSubview:v];
[v release];
}
@end
Нет никакого простого способа сделать это, в основном необходимо разделить UITabBar на подклассы и реализовать пользовательский рисунок, чтобы сделать то, что Вы хотите. Это - довольно мало работы для эффекта, но это может стоить того. Я рекомендую регистрировать ошибку с Apple для получения добавленного к будущему iPhone SDK.
Когда вы просто используете addSubview, ваши кнопки теряют возможность нажатия, поэтому вместо
[[self tabBar] addSubview:v];
используйте:
[[self tabBar] insertSubview:v atIndex:0];
У меня есть дополнение к окончательному ответу. Несмотря на то, что основная схема правильная, трюк с использованием частично прозрачного цвета может быть улучшен. Полагаю, что это только для того, чтобы пропустить градиент по умолчанию. Кроме того, высота TabBar составляет 49 пикселей, а не 48, по крайней мере, в OS 3.
Итак, если у вас есть соответствующее изображение 1 x 49 с градиентом, то это версия viewDidLoad, которую вы должны использовать:
- (void)viewDidLoad {
[super viewDidLoad];
CGRect frame = CGRectMake(0, 0, 480, 49);
UIView *v = [[UIView alloc] initWithFrame:frame];
UIImage *i = [UIImage imageNamed:@"GO-21-TabBarColorx49.png"];
UIColor *c = [[UIColor alloc] initWithPatternImage:i];
v.backgroundColor = c;
[c release];
[[self tabBar] addSubview:v];
[v release];
}
[[self tabBar] insertSubview: v atIndex: 0];
у меня отлично работает.