В div 2 div: html — 6 дивов в два ряда

Leave a Comment / Разное / By /

html — Как разместить по 2 div со свойством float в контейнере

Задать вопрос

Вопрос задан

Изменён 4 года 10 месяцев назад

Просмотрен 358 раз

У меня есть контейнер к примеру размером 480

Есть внутри четыре блока. размером 230 в ширину, и margin-right:20px;

Мне нужно сделать так что бы эти элементы раместились по 2 в ряд в родительском контейнере.

P.S мне не нужно предлагать устанавливать в цикле margin-right:0 при условие $i % 2 ! так как этот вопрос для меня важно решить путем css

Кстати, возможно есть другой способ сделать то что мне надо. Мне по сути надо разместить элементы (div размером 230) внутри контейнера 480 так, что бы между элементами был отступ 20 пикс.

  • html
  • css
  • css3

2

div.
 
 parent{
  width: 480px;
}
div.child{
  width: 230px;
  margin: 0 10px 0 0;
  background: red;
  float: left;
}
div.child:nth-child(2n+2){
  margin: 0 0 0 10px;
  background: yellow;
}
<div>
  <div>1</div>
  <div>2</div>
</div>

Как-то так ))

.parent {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    justify-content: space-between;
    -ms-align-items: center;
    align-items: center;
    width: 480px;
}
.child {
    width: 230px;
    text-align: center;
    background: #547bd1;
}
<div>
    <div>left</div>
    <div>right</div>
</div>

Или как-то так))

Или так

.parent {
  margin-right: -10px;
  margin-left: -10px;
  width: 480px;
}
.
  child {
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  width: 230px;
  text-align: center;
  background: #547bd1;
}
<div>
  <div>left</div>
  <div>right</div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как поставить div справа, обтекание, пример

Div справа или как расположить элемент «Dom»-a справа. Положение блока справа в разных ситуациях и с разными стилями!

Скопировать ссылку


  • Позиция блока справа свойство float со значением right

    Если вы используете свойство «float» со значением «right» — без дополнительных свойств, то получится блок с обтеканием.

    Поставим свойство — float и положение справа –right.

    Код получится:

    .sprava{

    float:right;/* Положение справа */

    background: #fd0; /* Цвет фона */

    width: 300px; /* Ширина */

    height:300px; /* Высота */

    }

    Далее создадим div, присвоим ему класс, который описали сверху. И напишем в  самом диве текст —  Класс — sprava.

    <div>Класс — sprava</div>

    Смотрим, что мы получили:

    Этот текст написан выше блока.

    Класс — sprava

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

    И как только текст заполнит всю высоту, блока, который находится справа, то текст будет уже заполнять всю ширину родительского блока.

    Скопировать ссылку


  • Div расположен справа свойство float без обтекания.

    Предположим, что мы хотим поставить
    div справа     с помощью float, но без обтекания текстом!

    Самое простое, с моей точки зрения, поместить наш див с классом «sprava» в другой див, который будет иметь аналогичную высоту, что и класс sprava, т.е. 100px.

    И добавим нашему наружному блоку «border: 1px solid;», чтобы мы его смогли увидеть!

    Класс — sprava, но внутри второго блока с height =100px;

    У нас получится:

    HTML :

    <div>
    <div>Класс — sprava, но внутри наружного блока с height =100px;</div>
    </div>

    Стили:

    .height_300 {

    height: 100px;

    border: 1px solid;

    }

    . sprava {

    float: right;

    background: #fd0;

    width: 300px;

    height: 100px;

    text-align: center;

    }

    Результат расположения блока справа:

    Как видим, наш блок расположился справа, и текст, который написан ниже, и расположился ниже блока.

    Скопировать ссылку


  • Div справа с помощью свойства margin-left

    Есть свойство margin-left, мы можем расположить div справа

    Создадим ещё раз новый див. С новым классом.

    Родительский блок имеет ширину 740px, и поставим в свойствах «margin-left =740px».

    <div>Класс — sprava-2</div>

    И класс:

    .sprava-2{

    margin-left: 740px;

    background: #fd0; /* Цвет фона */

    width: 300px; /* Ширина */

    height:300px; /* Высота */

    }

    Смотрим, что получилось:

    Класс — sprava-2

    Обратите внимание на поведение блока, он находится за краем правой границы, для разрешения монитора 1600 по горизонтали — почему данный блок вышел ровно за край родительского блока, мы предполагали, что он будет располагаться справа, но нет.
    ..
    В чем ошибка!?

    Дело в том. что мы не учли точку отсчета по умолчанию, а она располагается в верхнем левом углу. Нашего блока…

    Поэтому, нам нужно отнять от 740 ширину нашего блока 300 — и поставить её в свойство «margin-left».

    740 -300 = 440.

    Класс — sprava-2_1

    .sprava-2_1 {
    margin-left: 440px;
    background: #fd0;
    width: 300px;
    height: 100px;
    }

    Как видим, наш блок справа не зашел за края родительского блока.

    Скопировать ссылку


  • Div справа в крайней правой точке монитора

    Предположим, что вам нужно поставить div справа, максимально справа, чтобы он упирался в правый корай окна браузера…

    Создадим новый блока и новый класс:

    <div> </div>

    .sprava_3 {

    position: absolute;

    right: 0px;

    width: 300px;

    height: 300px;

    background: #fd0;

    }

    Свойство «right» будет работать только в том случае, если м поставим position: absolute;

    Блок находится в максимально правой стороны. Дальше, край окна браузера.

    Данный блок будет находится по горизонтали на этих словах, но никак не будет влиять на него.!

    Если вы уменьшите размер окна, до менее чем 740(ширина родительского блока), то блок наедет на текст.

    Когда данный блок будет наезжать на основной блок с текстом?!

    Сделаем скрин, когда размер экрана меньше 1080 и поставим родительскому блоку «border», чтобы мы могли его увидеть.

    Если вы читали внимательно, то должны были заметить, что цифры не бьется…

    Главный блок «div» = 740px.

    Прибавляем 300px — ширину нашего блока справа 740 + 300 = 1040, а на скрине 1080… где еще 40 px?

    Дело в том, что у «main_text» есть дополнительные 20px отступа с каждой стороны, вот 20 + 20 — 40.

    Поэтому, как только ширина окна будет меньше 1080, наш блок будет наезжать на основной блок «main_text».

    Нажмите, чтобы открыть в новом окне.


    Скопировать ссылку


  • Div справа в крайней правой точке родительского блока

    Когда мы рассматривали позицию блока справа с помощью «margin-left: 440px;», но если ваш родительский блок имеет резиновую ширину, то этот блок справа, будет уезжать вправо, при уменьшении основного и влево при увеличении.

    Смотрим на скрине :

    Нажмите, чтобы открыть в новом окне.


    Кстати — этой болезнью не страдает вариант №2

    И далее следующий вариант, блок будет находиться справа, в любой ситуации.

    Div справа с помощью свойства right

    Возьмем данные из предыдущего блока… и поместим его в другой блок и задаем ему свойства:

    .relative {

    position: relative;

    height: 300px;

    }

    Смотрим, что у нас получилось:

    Класс sprava_3 + наружный блок с position: relative;

    HTML:

    <div>

    <div>Класс sprava_3 + наружный блок с position: relative;</div>

    </div>

    CSS

    .sprava_3 {

    position: absolute;

    right: 0px;

    background: #fd0;

    width: 300px;

    height: 100px;

    text-align: center;

    }

    .relative {

    position: relative;

    height: 300px;

    }

    Скопировать ссылку


  • Div справа в крайней правой и верхней точке

    Предположим, что вам требуется разместить блок справа и сверху. И его(блок) надо зафиксировать в этом положении. М чтобы блок никак не менял своего положения!

    Давайте сделаем это:

    Html :

    <div>Класс sprava_0_sverhu_0 + всегда справа и всегда сверху </div>

    напишем свойства…

    Css:

    .sprava_0_sverhu_0 {

    width: 300px;

    height: 53px;

    background: #fff900;

    position: fixed;

    top: 0px;

    right: 0px;

    padding: 5px;

    font-size: 12px;

    }

    Результат:

    Естественно, что здесь вы ничего не увидите. потому, что данный блок находится в крайней правой точке и крайней верхней.

    Класс sprava_0_sverhu_0 + всегда справа и всегда сверху пункт 6

    Теги :
    div справа
    div обтекание слева
    как div расположить справа
    выравнивание div справа
    html div справа
    блок div справа
    div справа страницы
    разместить div справа
    div справа в header
    div обтекание с права
    как кнопку прижать вправо

    css — Как расположить два div горизонтально внутри другого div

    Asked

    Изменено 5 лет, 2 месяца назад

    Просмотрено 133 тыс. раз

    56

    Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
    Узнать больше.

    Я слишком долго не играл с CSS и на данный момент у меня нет рекомендаций. Мой вопрос должен быть довольно простым, но поиск в Google не дает достаточного ответа. Итак, пополняя коллективное знание…

     |#header------------------------------------------------------------ ------------------|
| НАЗВАНИЕ |
|#sub-title------------------------------------------------------------------------- ---------------|
|хлеб > крошка | выход из системы |
|#подлевый | #подправо|
|---------------------------------|---------------- ---------------------|

    Это то, что я хочу, чтобы мой макет был. Заголовок во всяком случае. Я хотел, чтобы подзаголовок содержал суб-левый И суб-правый. Какие правила css я использую, чтобы гарантировать, что div связан атрибутами другого div. В этом случае, как я могу гарантировать, что левый и правый подзаголовки останутся внутри подзаголовка?

    • css
    • layout
    • html

    Это довольно распространенное заблуждение, что вам нужен clear:both div внизу, хотя на самом деле это не так. Хотя ответ foxy правильный, вам не нужен этот несемантический, бесполезный очищающий div. Все, что вам нужно сделать, это вставить overflow:hidden в контейнер:

     #sub-title { overflow:hidden; }

    5

    При плавании слева и подправо они больше не занимают места в подзаголовке . Вам нужно добавить еще один div со стилем = "clear: Both" под ними, чтобы развернуть содержащий div, иначе они появятся под ним.

    HTML:

     
    
   <дел>
      нижний левый
   
    
   <дел>
      суб-право
    • <дел>

    CSS:

     #sub-left {
   плыть налево;
}
#подправо {
   поплавок: справа;
}
.clear-оба {
   ясно: оба;
}

    1

    Это должно делать то, что вы ищете:

     
    <голова>
        <тип стиля="текст/CSS">
            # заголовок {
                выравнивание текста: по центру;
            }
            #обертка {
                поле:0 авто;
                ширина: 600 пикселей;
            }
            #подглавный {
                поле:0 авто;
                ширина: 600 пикселей;
            }
            #подлевый {
                плыть налево;
                ширина: 300 пикселей;
            }
            #подправо {
                поплавок: справа;
                ширина: 240 пикселей;
                выравнивание текста: вправо;
            }
        
    
    <тело>
        <дел>
            
     
    Заголовок
     
    
            <дел>
                <дел>
                    Верно
    <дел> Оставил