Всем привет,
делал сетку на css, стал проверять. во всех браузерах всё как надо, ие только глючит.
приложил скрины из хрома и ие
код:
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="selectivizr-min.js" type="text/javascript"></script>
<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="topmenu span2 offset10">
<ul>
<li><a href="">Lorem.</a></li>
<li><a href="">Eligendi.</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="slider span12"></div>
</div>
<div class="row">
<div class="menu span4">
<ul>
<li><a href="">Lorem.</a></li>
<li><a href="">Earum.</a></li>
<li><a href="">Vel?</a></li>
<li><a href="">Dolor.</a></li>
</ul>
</div>
<div class="search span2 offset6"><input type="text" name="" id=""></div>
</div>
<div class="row">
<div class="sidebar span2">
<ul>
<li><a href="">Lorem.</a></li>
<li><a href="">Illo!</a></li>
<li><a href="">Tempore.</a></li>
<li><a href="">Eos.</a></li>
<li><a href="">Mollitia!</a></li>
</ul>
</div>
<div class="content span10">
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam ad omnis porro at alias hic sit autem et vitae totam maiores nemo pariatur ex cum ipsa quasi libero fugiat minima adipisci consequuntur tenetur illum officia quisquam velit eum maxime eligendi. Animi sequi blanditiis inventore eius iure saepe sunt id quasi illo adipisci ea eos cupiditate modi excepturi a veniam corporis beatae vel. Ipsum id aperiam deleniti repudiandae eos iste omnis iure perferendis dolorum corporis et culpa quis impedit beatae praesentium soluta minima eius at incidunt amet neque in dignissimos obcaecati blanditiis ut doloremque rem odit recusandae fugit voluptatibus molestias eveniet!</p>
<p>Atque porro nisi error eligendi fugiat maxime corporis inventore soluta magnam aliquam qui recusandae enim a sit repudiandae vitae molestiae nihil deserunt dolores quibusdam odio cupiditate quidem id autem consequuntur. Ad aperiam ut officiis doloremque a dignissimos quae id animi possimus repellat voluptatem necessitatibus quo explicabo sint maiores aut consequuntur veniam rerum praesentium nesciunt quisquam et aliquam asperiores assumenda culpa temporibus deserunt expedita perspiciatis iste inventore quibusdam cumque in nihil accusamus magnam iure molestias exercitationem impedit dolorem eos numquam iusto? Cum quo molestiae amet dignissimos fugiat magnam repellat porro minus sed numquam tempore quasi esse asperiores consectetur laboriosam obcaecati in!</p>
<p>Cumque rerum aspernatur architecto placeat quo tempora quasi velit itaque commodi magni necessitatibus earum maiores quod nisi similique eius officia quibusdam ratione nam consequatur! Ipsa quia iusto nihil vel perspiciatis vitae cupiditate facere dolorem alias eaque unde incidunt error quod dolorum amet voluptatum sit labore reprehenderit commodi debitis. Ut cumque odio eveniet quasi vel illo ex tempore omnis reiciendis velit repellat fugiat dolor iure dicta porro nemo excepturi debitis sed delectus eum quam doloribus hic minima ab ducimus totam praesentium minus provident repudiandae quae. Exercitationem ullam nihil quae eum dolorem beatae nisi aspernatur earum magni neque. Praesentium velit itaque dolorum?</p>
<p>Doloremque fuga pariatur voluptate nobis distinctio repellat harum illum placeat vel maiores neque aliquid temporibus saepe sequi accusantium. Aspernatur accusantium nemo veritatis tenetur iusto rem aperiam ipsam aliquam qui dignissimos aut debitis eaque libero mollitia rerum non cupiditate pariatur cumque numquam vitae reiciendis laborum minus fugiat ipsa amet velit ex nisi et harum magnam doloremque explicabo temporibus ratione. Repellat adipisci cum animi itaque ipsa asperiores sunt cumque ducimus maiores suscipit praesentium aliquid non. Maiores veritatis eius dolorum asperiores ea beatae distinctio culpa temporibus sed nihil nulla obcaecati alias qui id ut accusamus est architecto esse hic voluptatem optio consequatur rerum!</p>
<p>Perferendis quasi soluta delectus magnam mollitia tempora obcaecati fugit neque ipsa maxime rem laboriosam deleniti architecto necessitatibus reiciendis temporibus voluptate dolorum modi molestiae consectetur consequatur odio dolor sapiente. Perferendis vel officiis rerum explicabo repellendus praesentium eaque temporibus facilis tempora quibusdam sapiente iusto vitae nihil minima velit est nisi itaque nulla fuga saepe ut dolorum repudiandae molestiae maxime consectetur. Eius minus sunt deserunt eum alias ipsam porro reprehenderit quos totam quam vel perspiciatis mollitia aliquam id accusamus molestiae ea praesentium at similique labore ratione nesciunt explicabo amet ipsum error et dolore soluta laborum accusantium expedita consequatur delectus in tenetur recusandae atque.</p>
</div>
</div>
<div class="row">
<div class="footer span12">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae iusto quasi ducimus necessitatibus magni reiciendis optio voluptatum modi temporibus neque. Sunt inventore asperiores laboriosam architecto voluptate consectetur minus placeat nisi!</div>
</div>
</div>
</body>
</html> |
|
| CSS |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
| * {
transition: all .5s;
box-sizing: border-box;
}
body {
color: #333;
}
.container {
width: 940px;
margin: 0 auto;
}
.row {
margin-bottom: 20px;
}
.row:after {
display: block;
content: '.';
height: 0;
visibility: hidden;
clear: both;
}
[class*="span"] {
float: left;
display: inline;
margin-right: 20px;
}
[class*="span"]:last-child {
margin-right: 0;
float:right;
}
.span1 {width: 60px ;}
.span2 {width: 140px;}
.span3 {width: 220px;}
.span4 {width: 300px;}
.span5 {width: 380px;}
.span6 {width: 460px;}
.span7 {width: 540px;}
.span8 {width: 620px;}
.span9 {width: 700px;}
.span10 {width: 780px;}
.span11 {width: 860px;}
.span12 {width: 940px;}
.offset1 {margin-left: 60px ;}
.offset2 {margin-left: 140px;}
.offset3 {margin-left: 220px;}
.offset4 {margin-left: 300px;}
.offset5 {margin-left: 380px;}
.offset6 {margin-left: 460px;}
.offset7 {margin-left: 540px;}
.offset8 {margin-left: 620px;}
.offset9 {margin-left: 700px;}
.offset10 {margin-left: 780px;}
.offset11 {margin-left: 860px;}
.offset12 {margin-left: 940px;}
/**/
.topmenu ul li, .menu ul li, .sidebar ul li {
list-style: none;
}
.topmenu ul li a {
float: left;
text-decoration: underline;
color: #000;
font-size: 12px;
margin: 3px;
}
.content {
background: #f0f0f0;
}
.sidebar {
background: #62b0ff;
}
.search input {
width: 100%;
} |
|
(
