| |
|
|
| | Здравствуйте!
есть несколько элементов (с фиксированной шириной) в строке. подскажите, как сделать так, чтобы левый элемент был прижат к левому краю, правый - к правому, а расстояние между первым и вторым, между вторым и третьим и т.д. было бы одинаковым.
и второй вариант - есть несколько элементов (с фиксированной высотой) в одном столбце. тоже самое - верхний элемент хочется прижать к верхнему краю, последний - к нижнему, а внутри расстояния между ними одинаковые. | |
| |
|
|
| |
|
|
| |
для: rodmial
(19.01.2015 в 15:30)
| | | Вот, что у меня получилось:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
background: #eee;
}
#wrapper1 {
width: 900px;
padding: 10px;
position: relative;
text-align: center;
border: 1px solid #000;
}
#wrapper1 div {
width: 100px;
height: 100px;
display: inline-block;
}
#d1 {
border: 2px solid red;
position: absolute;
left: 0;
}
#d2 {
border: 2px solid green;
}
#d3 {
border: 2px solid blue;
position: absolute;
right: 0;
}
#wrapper2 {
height: 300px;
margin-top: 20px;
position: relative;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
}
#wrapper2 div {
width: 100px;
height: 30px;
}
#d4 {
border: 2px solid red;
position: absolute;
top: 0;
}
#d5 {
border: 2px solid green;
}
#d6 {
border: 2px solid blue;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id="wrapper1">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
<div id="wrapper2">
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Mookapek
(19.01.2015 в 21:24)
| | | спасибо большое. но это работает, если дивов только 3. а если больше? очень надо для 4-х | |
| |
|
|
| |
|
|
| |
для: rodmial
(20.01.2015 в 09:47)
| | | Для выравнивания по горизонтали можно воспользоваться таким вариантом:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
background: #eee;
}
#wrapper {
width: 50%;
text-align: justify;
line-height: 0;
font-size: 1px;
text-align-last: justify;
border: 1px dashed green;
}
#wrapper:after {
width: 100%;
height: 0px;
visibility: hidden;
overflow: hidden;
content: '';
display: inline-block;
}
#wrapper > div {
width: 100px;
height: 100px;
display: inline-block;
text-align: left;
border: 1px solid #000;
line-height: normal;
font-size: 14px;
vertical-align: top;
}
</style>
</head>
<body>
<div id="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Mookapek
(20.01.2015 в 15:33)
| | | ты просто выручил. преогромное тебе спасибо. | |
| |
|
|
