3 DIV в один ряд

Question

3 DIV в один ряд

0

Мне нужно три элемента <div> в одной строке.

Пример:

<div class="row">

    <div class="left">
         <!-- width 100% , float:left  -->
    </div>

    <div class="center">
         <!-- width 960px , margin:0 auto  -->

         <div class="sidebar">
              <!-- width 350px , float:right  -->
         </div>

    </div>

    <div class="right">
         <!-- width 100% , float:right  -->
    </div>

</div>

Пример изображения:

Я хочу установить тот же фон для div.right как div.sidebar.

Matrinkoo 18 янв. 2014, в 13:39

Источник

0

Не могли бы вы объяснить, почему вы пытаетесь это сделать? Я не вижу цели по изображению
Ian Clark 18 янв. 2014, в 12:16
0

установить все их поплавки влево. Также убедитесь, что их ширина меньше или равна ширине
Atieh 18 янв. 2014, в 12:17
1

Почему вы семантически разделяете 2 элемента, которые в соответствии с их рендерингом объединяются?
Niels Keurentjes 18 янв. 2014, в 12:19
0

Вы пытаетесь сделать дизайн паралакса или спрайта? что ты хочешь делать?
Lesly Revenge 18 янв. 2014, в 12:19
0

что внутри левого и правого дивов? эти дивы пустые? Вы только хотите, чтобы они продлили фон?
arieljuod 18 янв. 2014, в 12:20
0

Поместите .right внутри .center и примените фон к .center ?
David Thomas 18 янв. 2014, в 12:29
0

oi41.tinypic.com/2dkn5z5.jpg Знаете ли вы какое-либо другое решение для его реализации?
Matrinkoo 18 янв. 2014, в 12:32
0

arieljuod: Да, они пусты. Мне нужно повторить фон, если разрешение экрана превышает 960 пикселей. - Niels Keurentjes: потому что я не знаю, как это сделать. Боковая панель должна иметь тот же фон, что и у div.right ... но div.right пуст, со 100% шириной. Если разрешение экрана больше 960px (ширина оболочки) - фон должен повториться вправо. Вы понимаете меня? Извините, мой ингслш очень плох, но на картинке вы можете это увидеть, я так думаю.
Matrinkoo 18 янв. 2014, в 12:45
0

скажи мне, если мой то, что вы искали.
Lesly Revenge 18 янв. 2014, в 13:35
0

Я обновил свой ответ, добавив CSS3 calc() , который лучше поддерживает браузер. Дайте мне знать, если это поможет.
Ian Clark 18 янв. 2014, в 14:35
0

Невозможно сделать с последовательным результатом с div. Используйте таблицу.
Anderson 11 дек. 2014, в 00:55

Показать ещё 9 комментариев

Теги:

html

css

5 ответов

Ещё вопросы

Не могли бы вы объяснить, почему вы пытаетесь это сделать? Я не вижу цели по изображению
установить все их поплавки влево. Также убедитесь, что их ширина меньше или равна ширине
Почему вы семантически разделяете 2 элемента, которые в соответствии с их рендерингом объединяются?
Вы пытаетесь сделать дизайн паралакса или спрайта? что ты хочешь делать?
что внутри левого и правого дивов? эти дивы пустые? Вы только хотите, чтобы они продлили фон?
Поместите .right внутри .center и примените фон к .center ?
oi41.tinypic.com/2dkn5z5.jpg Знаете ли вы какое-либо другое решение для его реализации?
arieljuod: Да, они пусты. Мне нужно повторить фон, если разрешение экрана превышает 960 пикселей. - Niels Keurentjes: потому что я не знаю, как это сделать. Боковая панель должна иметь тот же фон, что и у div.right ... но div.right пуст, со 100% шириной. Если разрешение экрана больше 960px (ширина оболочки) - фон должен повториться вправо. Вы понимаете меня? Извините, мой ингслш очень плох, но на картинке вы можете это увидеть, я так думаю.
скажи мне, если мой то, что вы искали.
Я обновил свой ответ, добавив CSS3 calc() , который лучше поддерживает браузер. Дайте мне знать, если это поможет.
Невозможно сделать с последовательным результатом с div. Используйте таблицу.

joker · Answer 1 · 2014-01-18T11-14-00.000Z

css файл

 .main{ background-color: #ddd;}
.left {

    display: table-cell;
}
.middle {

    display: table-cell;
    width:100%;
}
.right {

    display: table-cell;
}

html-код

<div class="main">
<div class="left"> Some content </div>
<div class="middle"> This should fill the space left </div>
<div class="right"> Some other content </div>
</div>

Kris1 · Answer 2 · 2014-12-15T20-31-00.000Z

здесь вы идете 3 DIV в одну строку. Нажмите "Снять фрагмент кода", чтобы увидеть результат.

<div id="d3" style="display:inline-block; width:100px;">content1</div>
<div id="d3" style="display:inline-block; width:100px;">content2</div>
<div id="d3" style="display:inline-block; width:100px;">content3</div>

<div id="d1" style="display:inline-block; width:100px;">**content1**</div>
<div id="d1" style="display:inline-block; width:100px;">**content1**</div>
<div id="d3" style="display:inline-block; width:100px;">**content3**</div>

Lesly Revenge · Answer 3 · 2014-01-18T10-52-00.000Z

Я сделал это для вас. JSFiddle

            <html>
            <head>
            <style>

            #row{
            background: grey;
            width: 100%;
            margin: 0;
            float: left;
            }
            #left {
            background: #ccc;
            width: 60%;
            float: left;
            }
            #right{
            background: #999;
            width: 40%;
            float: right;

            }

            #content-left{
                width: 70%;
                float: right;
            }
            #right-top-wrapper{
            width: 100%;
            background: #666;
                color: #f3f3f3;
                float: left;
            }
            #right-top{
                width: 40%;

                clear: both;

            }
            #right-bottom{
                width: 40%;
                float: left;
                clear: both;
            }


            </style>
            </head>
            <body>
            <div id="row">
            <div id="left">
                <div id="content-left">
                <h3>Lorem Ipsum</h3>
                    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboru
                </div>
            </div>
            <div id="right">
                <div id="right-top-wrapper">
                    <div id="right-top">
                    <h3>Lorem Ipsum</h3>
                    "Lorem ipsum dolor sit amet, co
                </div>
                </div>
                <div id="right-bottom">

                <h3>Lorem Ipsum</h3>
                    "Lorem ipsum dolor sit amet, co
                </div>
            </div>
            </div>
            </body>
            <html>

1) Не могли бы вы предоставить скрипку, чтобы показать, как это работает, и 2) Я не вижу, как это достигает того, о чем просил ОП.
1. Скопируйте код и вставьте его в блокнот. 2. сохранить его где-нибудь. 3. подтянуть его в браузере. Тогда вы увидите, что это именно то, что он спросил.
Это не совсем то, как этот сайт работает ...
Я добавил ваш код в JSFiddle Lesly, но это не решает их проблему.
Я не собираюсь здесь рассказывать о каждой строке кода. Это просто CSS и HTML.
Этот сайт о помощи людям, если ваш код не отвечает на вопрос, тогда да, вы должны попытаться объяснить, чего вы пытались достичь

Ian Clark · Answer 4 · 2014-01-18T09-40-00.000Z

Решение 1 - CSS Calc

JSFiddle. Это решение использует функцию calc() CSS3. Это поддерживается всеми основными браузерами, особенно в IE9.

HTML

<div id="container" class="cf">
    <div id="left" class="side"></div>
    <div id="center"></div>
    <div id="right" class="side"></div>
</div>

CSS

#container div {
    height:300px;
    float:left;
}
#center {
    width:960px;
    background:#FFFF00;
}
.side {
    width:calc(50% - 480px);
    background:#FF0000;
}

(Примечание. Поскольку для этого решения требуются поплавки, я также включил взлом micro clearfix)

Решение 2 - Flexbox

JSFiddle. Этот метод использует модель flexbox CSS3. Совместимость с браузером в стороне - это мой предпочтительный подход, но это нехорошее решение, если вы хотите настроить целевые браузеры.

HTML

<div id="wrapper">
    <div id="left" class="flex"></div>
    <div id="center"></div>
    <div id="right" class="flex"></div>
</div>

CSS

#wrapper {
    display:flex;
}
#wrapper div {
    height:300px;
}
.flex {
    flex:1;
}
#center {
    width:960px;
}

Это то, что мне нужно, но это решение не поддерживается последней версией популярных веб-браузеров? Знаете ли вы другое решение для этого?
Ничто иное не приходило на ум, кроме использования JavaScript для изменения положения левого и правого DIV. Вот почему я спросил вас, какова была цель этого. Я также не уверен, что вы подразумеваете под «но это решение не поддерживается последней версией популярных веб-браузеров». Он поддерживается последними версии всех популярных веб - браузеров, просто не особенно IE <11 (/ 10 без -ms- )
проверьте мой ответ. Я просто переставил твои дивы.

Shhade Slman · Answer 5 · 2014-01-18T09-32-00.000Z

Используйте встроенный стиль при отображении div:

style="display:inline"

<div class="row">

<div style="display:inline" class="left">
     <!-- width 100% , float:left  -->
</div>

<div style="display:inline" class="center">
     <!-- width 960px , margin:0 auto  -->

     <div style="display:inline" 'class="sidebar">
          <!-- width 350px , float:right  -->
     </div>

  </div>

  <div class="right">
     <!-- width 100% , float:right  -->
  </div>

  </div>