Выровнять элементы при помощи float

@Wanderman73 · Регистрация: 31.03.2016

Author24 — интернет-сервис помощи студентам

Доброго времени суток. Такая проблемка. Изучаю html и css по курсам от "Специалиста". Прошел урок по плавающим элементам float и сlear. И после лабораторная работа выровнять ранее сделанную форму с помощью этих элементов. С учетом того что свойста display еще не проходили, то пользоваться им не желательно. Но все старания ни к чему не привели. Я уж отдельно создал 4 дива и с помощью флоата пробовал их перенести слева на право но переносятся только первый и третий. Я или чего то недопонял из этой темы или поздно уже учиться. Не могли бы помочь примером если не сложно?

Комментарий модератора

Один вопрос - одна отдельная тема!

@mrtoxas · 07.12.2016, 22:23

Wanderman73, приведите код, который у вас получается.

@Wanderman73 · 07.12.2016, 22:45 **[ТС]**

HTML5

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #red{
            background-color: red;
            width: 150px;
            height: 25px;
            float: right;
        }
         #green{
            background-color: green;
            width: 150px;
            height: 25px;
            clear: right;
           
         
        }
         #orange{
            background-color: orange;
            width: 150px;
            height: 25px;
            float: right; 
            
        }
         #blue{
            background-color: blue;
            width: 150px;
            height: 25px;
            clear: right;
        }        
    </style>
</head>
<body>
   <div id="red"></div>
   <div id="green"></div>
   <div id="orange"></div>
   <div id="blue"></div> 
</body>
</html>

Добавлено через 1 минуту
mrtoxas, Нужно чтобы каждый из них по отдельности не в общем контейнере ушел вправо

Добавлено через 7 минут
mrtoxas, а форма простейшая типа как в этой теме Выровнять текстовые поля в форме
только у меня еще техтареа добавлена и радиокнопки

Добавлено через 3 минуты
mrtoxas,

HTML5

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #red{
            background-color: red;
            width: 150px;
            height: 25px;
            float: right;
        }
         #green{
            background-color: green;
            width: 150px;
            height: 25px;
            clear: right;
           
         
        }
         #orange{
            background-color: orange;
            width: 150px;
            height: 25px;
            float: right; 
            
        }
         #blue{
            background-color: blue;
            width: 150px;
            height: 25px;
            clear: right;
        }
        
    </style>
</head>
<body>
   <div id="red"></div>
   <div id="green"></div>
   <div id="orange"></div>
   <div id="blue"></div> 
</body>

@mrtoxas · 07.12.2016, 23:14

Если я правильно понял, тогда

CSS

#red {
   background-color: red;
   width: 150px;
   height: 25px;
   float: left;
 }
 #green {
   background-color: green;
   width: 150px;
   height: 25px;
   float:left;
 }
 #orange {
   background-color: orange;
   width: 150px;
   height: 25px;
   clear:left;   
   float: left;
 } 
 #blue {
   background-color: blue;
   width: 150px;
   height: 25px;
   float:left;
 }

Если не правильно, тогда нарисуйте и прикрепите к сообщению, то что должно получиться в итоге.

@Wanderman73 · 08.12.2016, 00:33 **[ТС]**

mrtoxas, по умолчанию вот так вот должно быть

CSS

#red {
   background-color: red;
   width: 150px;
   height: 25px;
   float: left;
 }
 #green {
   background-color: green;
   width: 150px;
   height: 25px;
   float:left;
 }
 #orange {
   background-color: orange;
   width: 150px;
   height: 25px;
   clear:left;   
   float: left;
 } 
 #blue {
   background-color: blue;
   width: 150px;
   height: 25px;
   float:left;
 }

Добавлено через 1 минуту
mrtoxas, а надо чтобы в такой же последовательности один на другим строго справа, при этом чтобы каждый из дивов был отдельным. В общий контейнер их заключать не нужно

В идеале должно выйти как на этом рисунке но я не могу понять как это спозиционировать с помощью именно флоат и клеар. А пример с дивами поможет мне понять

@mrtoxas · 08.12.2016, 01:30

Давайте с блоками разберемся сначала. Вот три варианта, может какой-то правильный будет. Как их еще можно расположить, я уже не знаю.

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    div {
    width: 150px;
    height: 25px;
    border: 1px solid red;
  }
  #second {
    float: right;
  }
  #first,#third {
    float: left;
  }
  #four {
    clear: left;
    float: right;
  }   
  </style>
</head>
<body>
  <div id="second">2</div>
  <div id="first">1</div>
  <div id="four">4</div>
  <div id="third">3</div>
</body>
</html>

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    div {
  width: 150px;
  height: 25px;
  border: 1px solid red;
  float: right;
}
#second,
#four,
#third {
  clear: right;
}
  </style>
</head>
<body>
  <div id="first">1</div>
  <div id="second">2</div>
  <div id="third">3</div>
  <div id="four">4</div>
</body>
</html>

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    div {
      width: 150px;
      height: 25px;
      border: 1px solid red;
      float: right;
    }
    #four{
      clear:right;
    }
  </style>
</head>
<body>
  <div id="second">2</div>
  <div id="first">1</div>
  <div id="four">4</div>
  <div id="third">3</div>
</body>
</html>

@Wanderman73 · 08.12.2016, 11:06 **[ТС]**

Спасибо большое, второй вариант по блокам.Думаю что с формой получится если сделать таким образом как блоки, и задать потом margin-right.

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	07.12.2016, 22:23	2
	Wanderman73, приведите код, который у вас получается. 0

@Wanderman73 0 / 0 / 0 Регистрация: 31.03.2016 Сообщений: 14
	08.12.2016, 11:06 [ТС]	7
	Спасибо большое, второй вариант по блокам.Думаю что с формой получится если сделать таким образом как блоки, и задать потом margin-right. 0