Как сделать так, чтобы элементы div отображались встроенными?

Question

Учитывая этот HTML:

<div>foo</div><div>bar</div><div>baz</div>

Как сделать так, чтобы они отображались в строке так:

Foo Bar Baz

не так:

Foo
бар
баз

Answer 1

Я бы использовал пролеты или плавающий div слева. Единственная проблема с плавающей точкой заключается в том, что вы должны впоследствии очистить float или для содержащего div должен быть установлен стиль переполнения auto

.

Answer 2

Вы должны содержать три div. Вот пример:

CSS

div.contain
{
  margin:3%;
  border: none;
  height: auto;
  width: auto;
  float: left;
}

div.contain div
{
  display:inline;
  width:200px;
  height:300px;
  padding: 15px;
  margin: auto;
  border:1px solid red;
  background-color:#fffff7;
  -moz-border-radius:25px; /* Firefox */
  border-radius:25px;
}

Примечание: атрибуты border-radius являются необязательными и работают только в браузерах, совместимых с CSS3.

HTML

<div class="contain">
  <div>Foo</div>
</div>

<div class="contain">
  <div>Bar</div>
</div>

<div class="contain">
  <div>Baz</div>
</div>

Обратите внимание, что div'ы 'foo', 'bar' и 'baz' содержатся в div `.

Answer 3

Я знаю, что люди говорят, что это ужасная идея, но на практике она может быть полезна, если вы хотите сделать что-то вроде мозаичных изображений с комментариями под ними. например Picasaweb использует его для отображения миниатюр в альбоме.
Смотрите, например, / demo http://closure -library.googlecode.com / svn / trunk / closure / goog / demos / inline_block_quirks.html (класс goog-inline-block; я сокращаю его до ib здесь)

/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }

Учитывая тот CSS, установите ваш div в класс ib, и теперь он волшебным образом является встроенным блочным элементом.

Answer 4

Я думаю, что вы можете использовать этот способ без использования CSS -

<table>
    <tr>
        <td>foo</td>
    </tr>
    <tr>
        <td>bar</td>
    </tr>
    <tr>
        <td>baz</td>
    </tr>
</table>

Прямо сейчас вы используете элемент уровня блока, чтобы получить нежелательный результат. Таким образом, вы можете встроенный элемент, как span, small и т. Д.

<span>foo</span><span>bar</span><span>baz</span>

Answer 5

<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>

Answer 6

<div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
    #div01, #div02, #div03 {
                                float:left;
                                width:2%;
    }   
 </style>
 <div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 //solution 2

 <style>
      #div01, #div02, #div03 {
                                  display:inline;
                                  padding-left:5px;
      }   
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 /* I think this would help but if you have any other thoughts just let me knw      kk */

Answer 7

Я просто стремлюсь сделать их фиксированной ширины, чтобы они в сумме составляли общую ширину страницы - вероятно, работает, только если вы используете страницу фиксированной ширины. Также "плавать".

Answer 8

<div class="cdiv">
<div class="inline"><p>para 1</p></div>
 <div class="inline">
     <p>para 1</p>
     <span>para 2</span>
     <h1>para 3</h1>
</div>
 <div class="inline"><p>para 1</p></div>

http://jsfiddle.net/f8L0y5wx/

Answer 9

мы можем сделать это как

.left {
    float:left;
    margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>