2015-06-04 1 views
1

У меня есть этот макет 3 колонки наHTML удалить неизвестный пробельные

CSS и HTML

#content{ 
 
    width: 100%; 
 
    padding: 0 15px 0; 
 
    margin:0px; 
 
} 
 
#content-left{ 
 
    width: 20%; 
 
    display:inline-block; 
 
} 
 
#content-main{ 
 
    width: 55%; 
 
    display:inline-block; 
 
} 
 
#content-right{ 
 
    width: 20%; 
 
    display:inline-block; 
 
}
<div id="content"> 
 
    <div id="content-left"> 
 
    <p>Lorem ipsum....</p> 
 
    </div> 
 
    <div id="content-main"> 
 
    <p>Lorem ipsum....</p> 
 
    </div> 
 
    <div id="content-right"> 
 
    <p>Lorem ipsum....</p> 
 
    </div> 
 
</div>

он создал макет я хочу, однако, у меня есть проблема на # содержание магистральных. Я не могу удалить «SPACE» выше пункт ..

выход выглядит как этот

| [Text here] |  SPACE SPACE SPACE SPACE SPACE   | [Text here] | 
| [Text here] |  SPACE SPACE SPACE SPACE SPACE   | [Text here] | 
| [Text here] |  SPACE SPACE SPACE SPACE SPACE   | [Text here] | 
| [Text here] |[Text here][Text here][Text here][Text here]| [Text here] | 

Может кто-нибудь помочь мне с этим, я все еще стартер в CSS.

ответ

2

Использование vertical-align: top в CSS #content-main. Вот отрывок

#content{ 
 
    width: 100%; 
 
    padding: 0 15px 0; 
 
    margin:0px; 
 
} 
 
#content-left{ 
 
    width: 20%; 
 
    display:inline-block; 
 
    vertical-align: top; 
 
} 
 
#content-main{ 
 
width: 55%; 
 
display:inline-block; 
 
    vertical-align: top; 
 
} 
 
#content-right{ 
 
width: 20%; 
 
display:inline-block; 
 
    vertical-align: top; 
 
}
<div id="content"> 
 
<div id="content-left"> 
 
    <p>Lorem ipsum....</p> 
 
    <p>Lorem ipsum....</p> 
 
    <p>Lorem ipsum....</p> 
 
    <p>Lorem ipsum....</p> 
 
    
 
</div> 
 
    <div id="content-main"> 
 
    <p>Lorem ipsum....</p> 
 
    <p>Lorem ipsum....</p> 
 
</div> 
 
<div id="content-right"> 
 
    <p>Lorem ipsum....</p> 
 
    <p>Lorem ipsum....</p> 
 
    <p>Lorem ipsum....</p> 
 
</div> 
 
</div>

-1

Добавьте это в таблице стилей.

*{ 
    margin: 0; 
    padding: 0; 
} 
+2

Это может не помочь! – Pugazh

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