display: inline vs inline-block vs block for non-nav elements

Question

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

Чтобы быть конкретным, я пытаюсь воспроизвести верхнюю страницу 37signal, и я не могу понять, как выстроить три div.

http://37signals.com/

Моя разметка выглядит следующим образом:

<section class="imgContainer"> 
    <ul> 
     <img src="logo-bc.png" alt="Basecamp"> 
     <li class="productTitle">Basecamp&copy;</li> 
      <ul> 
       <li class="productSubTitle">Manage Projects</li> 
       <li class="productDescription">Used by millions for project management.</li> 
      </ul> 
     <img src="logo-hr.png" alt="Basecamp"> 
     <li class="productTitle">Highrise&copy;</li> 
      <ul> 
       <li class="productSubTitle">Manage Contacts</li> 
       <li class="productDescription">Know the people you do business with.</li> 
      </ul> 
     <img src="logo-cf.png" alt="Basecamp"> 
     <li class="productTitle">Campfire&copy;</li> 
      <ul> 
       <li class="productSubTitle">Work in Real-Time</li> 
       <li class="productDescription">Group chat rooms for your business.</li> 
      </ul> 
    </ul> 
</section> 

Благодаря передовой!

редактировать: добавление CSS в соответствии с инструкциями:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 14, 2013 */ 

@font-face { 
    font-family: 'crimson_textsemibold'; 
    src: url('crimsontext-semibold-webfont.eot'); 
    src: url('crimsontext-semibold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('crimsontext-semibold-webfont.woff') format('woff'), 
     url('crimsontext-semibold-webfont.ttf') format('truetype'), 
     url('crimsontext-semibold-webfont.svg#crimson_textsemibold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 


html { 
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; 
} 

h1, h2 { 
    font-family: "crimson_textsemibold" /*"Crimson Text"*/,"CrimsonSemibold","Times New Roman",Georgia,serif; 
} 

body { 
    set width: 80%; 
    margin: 0 auto; 
    text-align: center 
} 

nav ul li a { 
    text-decoration: none; 
} 

header { 

} 

ul li { 
    display: inline; 
} 

li.productTitle { 
    font-size: 2em; 
    padding-top: .2em; 
} 

li.productSubTitle { 
    color: red; 
    font-weight: bold; 
    padding: .6em 0 1em 0; 
} 

Новый HTML:

<section id="imgContainer"> 
     <div class="mainContent"> 
      <img src="logo-bc.png" alt="Basecamp"> 
      <p>Basecamp</p> 
      <p>Manage Projects</p> 
      <p>Used by millions for project Management.</p> 
     </div> 
     <div class="mainContent"> 
      <img src="logo-hr.png" alt="Basecamp"> 
      <p>Highrise</p> 
      <p>Manage Contacts</p> 
      <p>Know the people you do business with.</p> 
     <div class="mainContent"> 
      <img src="logo-cf.png" alt="Basecamp"> 
      <p>Campfire</p> 
      <p>Work in Real-Time</p> 
      <p>Group chat rooms for your business.</p> 
     </div> 
    </section> 

Новый CSS:

#imgContainer { 
    width: 600px; 
    height: 1000px; 
    background-color: blue; 
    text-align: center; 
    margin: 0 auto; 
} 

.mainContent { 
    display: inline-block; 
    width: 150px; 
    height: 200px; 
    background-color: green; 
    margin-top: 50px; 
} 

Я в основном скопировали код из JSfiddle, и я получаю очень странный эффект ->http://gyazo.com/dfdded3b2304aec9eb1d00a82fef48fd

Большое вам спасибо за помощь!

Answer 1

Вы хотите, чтобы ваш контейнер, который держит ваши элементы text-align:center;

Вы тогда будете хотеть, чтобы дать свои внутренние элементы: display:inline-block;

Here's an example I whipped up for you.

HTML:

<div id="container"> 
    <div class="element"> 
     <p>Basecamp</p> 
     <img src="http://lorempixel.com/100/100/"/> 
     <p>Lorum Ipsum Pixel</p> 
    </div> 
    <div class="element"> 
     <p>Basecamp</p> 
     <img src="http://lorempixel.com/100/100/"/> 
     <p>Lorum Ipsum Pixel</p> 
    </div> 
    <div class="element"> 
     <p>Basecamp</p> 
     <img src="http://lorempixel.com/100/100/"/> 
     <p>Lorum Ipsum Pixel</p> 
    </div> 
</div> 

CSS:

#container{width:600px;height:1000px;background-color:blue;text-align:center;} 
.element{width:150px;height:300px;background-color:red;display:inline-block;margin-top:50px} 

Обновление: добавлены изображения.

Answer 2

Всегда помните, рядный используются, чтобы держать сторону вещи бока, встроенного блока используются, чтобы держать сторону вещи бока, но контейнеры сохранят свои свойства блока, то есть они будут иметь определенную ширину и высоту, в отличие от встроенного контейнер, ширина и высота которого зависит от их содержимого. Блок никогда не будет держать вещи бок о бок, он всегда будет один под другим. это основные правила css, чем больше вы играете с ним, тем лучше вы его поймете :)