Как вставить div в одной строке

Question

Как вставить div в одной строке

0

Я пытаюсь вставить 4 divs в одну строку, но они идут каждый после каждого. Я работал, но я не мог найти проблему. Я могу разместить блоки в хорошем месте, переместив его с функцией margin, но я думаю, что есть лучший способ.

Он смотрит на данный момент: picture

#recent_work {
    width:952px;
    margin:0 auto;
    height:auto;
    position:relative;
    padding-top:15px;

}

#recent_work p:first-child {
    font-family:Montserrat;
    font-size:16px;
    color:#353c3e;
    width:238px;
}

#recent_work p:nth-child(2) {
    font-family:Montserrat;
    font-size:12px;
    color:#8f8f8f;
    width:190px;
    line-height:25px;
}

.grey_block {
    float:right;
    background-color:#eaeaea;
    width:230px;
    height:489px;

}

.orange_block {
    width:230px;
    height:205px;
    background-color:#e05d41;
}

.white_block {
    width:230px;
    height:281px;
    background-color:#FFF;
}



<div id="recent_work">
            <p>RECENT WORK</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet laoreet leo at dictum.</p>
            <div class="grey_block">
                <div class="orange_block">
                    <img src="img/1.png"/>
                </div>
                <div class="white_block">
                </div>
            </div>
        </div>

Edvinas 21 март 2014, в 21:56

Источник

0

возможный дубликат получения 2 делений на одной строке , среди многих других
Dryden Long 21 март 2014, в 20:08
0

Вместо div вы можете использовать span который не добавляет новую строку. Пожалуйста, создайте демо Fiddle для этого, jsfiddle.net
DHS 21 март 2014, в 20:11

Теги:

html

css

position

block

margin

3 ответа

Ещё вопросы

возможный дубликат получения 2 делений на одной строке , среди многих других
Вместо div вы можете использовать span который не добавляет новую строку. Пожалуйста, создайте демо Fiddle для этого, jsfiddle.net

timing · Answer 1 · 2014-03-21T18-30-00.000Z

Вы должны либо display: inline-block divs display: inline-block или float: left зависимости от фактических результатов, которые вы хотите достичь в конце.

user2291995 · Answer 2 · 2014-03-21T19-11-00.000Z

вы можете использовать

position:relative top:somepx left:somepx;

это поможет u для достижения цели u.. просто дать somepx вверху или слева.

Kheema Pandey · Answer 3 · 2014-03-21T18-17-00.000Z

В вашем стиле элемент p принимает всю ширину, поэтому изображение приближается чуть ниже.

поскольку родительский div уже имеет relative position поэтому вы можете установить absolute position для дочернего div.

.grey_block {
  position:absolute; /*Added line*/
  top:0; /*star from top*/
  right:0; /*Start from right*/
  background-color:#eaeaea;
  width:230px;
  height:489px;
}

Проверьте демонстрацию.