DIV выходит из строя без причины?

Я не могу понять это.DIV выходит из строя без причины?

У меня есть для display:inline-block. По какой-то причине нижний левый div хочет неправильно выровнять себя.

HTML выглядит чистым. Как и CSS.

<section class="top" data-type="background" data-speed="10" class="pages"> 
     <section id="s"> 
      <div class="title">Services</div> 
       <div class="service"> 
        <div class="serviceTitle"><h2>Domain & Hosting</h2></div> 
        <div class="serviceText"><p>Need to set up a domain name and web hosting account? Not sure where to start? Leave it to me!</p></div> 
       </div> 
       <div class="service"> 
        <div class="serviceTitle"><h2>Bespoke Design</h2></div> 
        <div class="serviceText"><p>Web design which enhances your individual or business's image and caters to your target audience's needs.</p></div> 
       </div> 
       <div class="service"> 
        <div class="serviceTitle"><h2>Responsive Design</h2></div> 
        <div class="serviceText"><p>I make sure your site looks great no matter which device it is viewed on, bringing you and your website into the mobile world.</p></div> 
       </div> 
       <div class="service"> 
        <div class="serviceTitle"><h2>Maintenance</h2></div> 
        <div class="serviceText"><p>Maintaining and updating your web presense is a necessity that can often be overlooked. Leave the task to me for a set monthly fee.</p></div> 
       </div>  
     </section> 
</section> 

.service { 
    display:inline-block; 
    margin:20px; 
    background:pink;  
} 

.serviceTitle { 
    text-align:center; 
    font-weight:600; 
    width:400px; 
    height:56px; 
    color:#fff; 
    background:url(../_images/title.png); 
    margin-bottom:10px; 
} 

.serviceText { 
    height:200px; 
    width:400px; 
    background:red; 
}

источник

2014-01-15 ineedhalp

Добавить vertical-align:top к вашим Div элементов.

источник

2014-01-15 21:00:46

Просто избили меня, +1. :] Вот скрипка для усилий, http://jsfiddle.net/CJtDN/1/. –

Отлично! Благодаря! Это было странно, потому что он уже работал нормально, пока я не упростил его, а затем начал действовать. Weird. – ineedhalp

Установите div.service css с вертикальным выравниванием: сверху;

источник

2014-01-15 21:02:46 Mark

Это делается просто без CSS добавить раздел выравнивания в свой DIV следующим образом:

<div align="left"> 
\\or 
<div align="right"> 
\\or 
<div align="center"> 
\\etc...

добавить к каждому сНу тега, так что это будет выглядеть так:

<section class="top" data-type="background" data-speed="10" class="pages"> 
     <section id="s"> 
      <div align="left" class="title">Services</div> 
       <div align="left" class="service"> 
        <div align="left" class="serviceTitle"><h2>Domain & Hosting</h2></div> 
        <div align="left" class="serviceText"><p>Need to set up a domain name and web hosting account? Not sure where to start? Leave it to me!</p></div> 
       </div> 
       <div align="left" class="service"> 
        <div align="left" class="serviceTitle"><h2>Bespoke Design</h2></div> 
        <div align="left" class="serviceText"><p>Web design which enhances your individual or business's image and caters to your target audience's needs.</p></div> 
       </div> 
       <div align="left" class="service"> 
        <div align="left" class="serviceTitle"><h2>Responsive Design</h2></div> 
        <div align="left" class="serviceText"><p>I make sure your site looks great no matter which device it is viewed on, bringing you and your website into the mobile world.</p></div> 
       </div> 
       <div align="left" class="service"> 
        <div align="left" class="serviceTitle"><h2>Maintenance</h2></div> 
        <div align="left"class="serviceText"><p>Maintaining and updating your web presense is a necessity that can often be overlooked. Leave the task to me for a set monthly fee.</p></div> 
       </div>  
     </section> 
</section>

Это для левой выравнивание и просто изменение в соответствии с первым набором тегов, которые я написал в соответствии с вашими потребностями.

источник

2014-01-15 21:19:07 ThunderToes

DIV выходит из строя без причины?

ответ

Смежные вопросы