Как я могу отображать элементы div в одной строке

Привет всем, я хочу отобразить 3 элемента подряд. Я пробовал следующий код, но он не отображает их правильно.

    <div id="mainDiv" style="background-color:#f77f00; width:90%; margin-right:5%; margin-left:5%; margin-bottom:1%; margin-top:1%;" >
        <div id="left" onclick="Deletefav(this)"  style="display: inline; width:20%; float:left; ">'+
            '<img style="display: inline;" src="" />
        </div>'+

        <div id="center" onclick=""  style=" width:30%;  display: inline;text-align: center; margin:10%;">
            <p style="display: inline;"><font color="#fff" face="verdana" size="4">testing</font></p>
        </div>

        <div id="right" onclick="Callfav(this)"  style="display: inline; width:20%; float:right;">
            <img style="display: inline;" src="" /> 
        </div>
    </div>

Отображается вот так

Вышеприведенный код отображает это, я не знаю, почему текст соответствует изображениям

Я хочу создать его как образец изображенияSample


javascript html jquery css
person Nomiluks    schedule 22.05.2014    source источник
comment
Ваше изображение выглядит так, как будто они все подряд для меня. Что не так с этим?   -  person Rory McCrossan    schedule 22.05.2014
comment
Пожалуйста, прочитайте мой вопрос еще раз, я сделал несколько изменений, которые могут объяснить это лучше   -  person Nomiluks    schedule 22.05.2014
comment
Пожалуйста, опубликуйте действительный HTML-код, с которым сообщество может работать, чтобы воспроизвести проблему. Или укажите что-то вроде JSFiddle, демонстрирующее проблему. И старайтесь избегать встроенных стилей , что делает ваш код крайне сложным для работы… Зачем использовать CSS   -  person T J    schedule 22.05.2014
comment
@TJ прав, я с ним согласен   -  person    schedule 22.05.2014

Ответы (5)


arrow_upward
5
arrow_downward

Дайте свойство отображения inline-block для внутренних div:

  display:inline-block;

Обновление:

вам нужно установить высоту для div, у которого есть jo will fix it, как и у других, чтобы в div были изображения:

Демо

person Milind Anantwar    schedule 22.05.2014
comment
И настроить ширину тоже. Верно? - person PeterKA; 22.05.2014
comment
Пожалуйста, прочитайте мой вопрос еще раз, я сделал несколько изменений, которые могут объяснить это лучше - person Nomiluks; 22.05.2014

arrow_upward
1
arrow_downward

Добавьте display: inline-block; к дочерним блокам.

Установите высоту дочерних div:

  1. Возможность: установить высоту для всех дочерних элементов: height: 20px /* or in %, em, etc */;
  2. Возможность: установить высоту для дочерних элементов: height: inherit;, которая дает высоту от родительского элемента до дочерних элементов.

Из W3Schools:

Ключевое слово inherit указывает, что свойство должно наследовать свое значение от родительского элемента.

Ключевое слово inherit можно использовать для любого свойства CSS и для любого элемента HTML.

person toesslab    schedule 22.05.2014

arrow_upward
0
arrow_downward

Если вам нужно быстрое исправление, вы можете использовать другой элемент со свойством clear:both;:

'</div> <br style="clear:both; height:0;" />';
person Jai    schedule 22.05.2014

arrow_upward
0
arrow_downward

добавьте высоту во второй элемент div, который отображается неправильно, например
'<div id="${_id}" onclick="" style="height=40px;background-color:#f77f00; float:left; width:50%; ">'+ '<p style=""><font color="#fff" face="verdana" size="4">${name}</font></p>'+ '</div>'+

Добавьте лайк style="height=40px;

person Community    schedule 22.05.2014

arrow_upward
0
arrow_downward

Здесь я написал код, который может решить эту проблему (:

<section style="background-color:#f77f00; text-align: center; vertical-align: middle;">
<div>
    <img style=" " src="http://i58.tinypic.com/16c9ulk.png" />
</div>
<div>
    <p style=""><font color="#fff" face="verdana" size="4">JO willl fix it </font>
    </p>
</div>
<div>
    <img style="" src="http://i59.tinypic.com/b4ddtu.png" />
</div>
</section>

Демо

person Nomiluks    schedule 23.05.2014