ГЛАВНАЯ     АРХИВ     НАПИСАТЬ АДМИНУ     ПОДПИСАТЬСЯ НА RSS     ВОЙТИ      

Поиск

Категории

Облако тегов

  << Предыдущий пост       Следующий пост >>  
От: 4aIIaeB
18. сентября 2012 13:25

Очень частый вопрос который задают на форумах, это как выровнять множество div-ов, используя класс CSS.

Здесь пример того как это сделать. Для простоты я буду выравнивать 3 div-а.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Aligning Multiple DIV's using CSS</title>
<
style type="text/css">
.divOuter{
display:inline;
text-align:center;
}

.divInner1, .divInner2, .divInner3{
border: 1px solid;
float:left;
width:150px;
height:150px;
margin-left:3px;
margin-right:3px;
}
</style>
</
head>
<
body>
<
div class='divOuter'>
<
div class='divInner1'>First DIV</div>
<
div class='divInner2'>Second DIV</div>
<
div class='divInner3'>Third DIV</div>
</
div>
</
body>
</
html>


А выглядеть это будет так:

image

Это перевод. Оригинал здесь.

Похожие записи


Вопросы на собеседовании C#, Net, ASP.NET, SQL
Продолжая тему вопросов на собеседовании. Нашел еще одну подборку. Оригинал лежит здесь . Перенес, чтобы не затерялось. Есть вполне вменяемые ответы (хотя, на некоторые вопросы ответил бы по-другому). Ответы находятся после списка вопросов, я их не менял. 23. Что такое шаблон проектирования Model/View/Controller? Как и зачем его применяют? 2...

Как добавить ссылку на CSS программно используя JavaScript ?
В этом посте, я покажу кусок JavaScript-ового кода, который позволит вам добавить програмно ссылку на CSS файл в страницу. <html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <link href="CSS/FloatDes.css" rel="stylesheet" title="Float layout" type="text/css" /> <script type="text/javascript"> func...

Как изменить вид первой буквы или первой строки параграфа используя CSS ?
<head> <title>CSS Psuedo Elements first-letter and first-line (from DevCurry.com)</title> <style type="text/css"> .lor:first-letter { font-size: 2em; } .lor:first-line { color:Blue; font-style: italic; } </style> </head> <body> <p class="lor"> Lorem ipsum dolor sit amet, consectetur adipisicing...

Добавить комментарий




biuquote
  • Комментарий
  • Предпросмотр
Loading


  Сохранить комментарий