CSS - поля и отступы не работают при вертикальном позиционировании

Question

CSS - поля и отступы не работают при вертикальном позиционировании

0

я делаю что-то вроде этого:

Это выглядит так:

Как вы можете видеть, некоторые вещи плохо позиционируются, я пытаюсь использовать отступы, чтобы исправить это, но не перемещать вертикально, как я могу это исправить?

Мой HTML:

    <div class='article-container'>
      <div class='article'>  
        <div class="img-position">
        <a href="#"><img src="http://funedit.com/andurit/try1/images/foto.png"/></a> 
        </div>
        <span class="topic-name"><a href="#">Název topicu nebo článku </a></span>
        <span class="date">28.8.2014 / 19:30</span>
        <span class="author"> od<a href="#"> Dwandy </a></span>
        <span class="article-description"> Ahoj jak se máte já se mám dobře ale nevím jak vy teda se máte? </span>
        <span class="article-comments"> <a href="#"> 4x reakce </a></span>
        <a href="#"><span class="read-article"></span></a> 
    </div>
  </div>

Мой CSS:

div.article-container {
    width:987px;
}

div.article {
    width:326px;
    height: 145px;
    display:inline-block;
}
div.img-position {
    display:inline-block;
    float:left;
    margin: 10px 0px 0px 5px;
}

span.author a{
    color:#555555;
    text-decoration: none;
}
span.topic-name{
    margin: 50px 0px 0px 0px;
}

span.topic-name a{
    color:#666666;
    text-decoration: underline;
    margin: 50px 0px 0px 0px;
}

span.article-description{
    margin: 10px 0px 0px 0px;
    width: 325px;
    display: block;
}

span.article-comments{
    margin: 25px 0px 0px 0px;
    float:left;
}

span.read-article{
    background-image: url("images/readit.png");
    background-repeat: no-repeat;
    display:block;
    width: 63px;
    height: 26px;
    float:right;
    margin: 18px 0px 50px 0px;
}

span.article-comments a{
    text-decoration: underline;
    color:#2d79bd;    
}

span.date {
    color:#a5a5a5;
}

Это кто-нибудь, кто может помочь мне исправить это, чтобы выглядеть как на изображении? Предварительный просмотр в прямом эфире можно найти на: http://funedit.com/andurit/try1/

Спасибо, что прочитали эту тему.

user258459 14 апр. 2014, в 14:37

Источник

0

использовать список. <ul> - лучшее решение
Atal Shrivastava 14 апр. 2014, в 12:02

Теги:

html

css

4 ответа

Ещё вопросы

использовать список. <ul> - лучшее решение

Janak · Answer 1 · 2014-04-14T11-20-00.000Z

Попробуй это

span.topic-name{
     display: block;
}

И это должно сработать.

Pooja Shah · Answer 2 · 2014-04-14T10-39-00.000Z

Маржа не работает с встроенными элементами. Если вы хотите применить маржу к диапазону, вам нужно либо сделать этот блок элемента, либо встроенный блок.

Следовательно,

span.topic-name{
    display: block; 
        /* or */
    display: inline-block; 
}

поможет вам применить маржу к вашим элементам и, таким образом, в конечном итоге поможет в их вертикальном выравнивании.

Era · Answer 3 · 2014-04-14T09-26-00.000Z

попробуйте дать:

.topic-name { float:left; margin:5px 0 0;}

AlexPrinceton · Answer 4 · 2014-04-14T09-22-00.000Z

0

position: relative; или absolute и использовать top left

AlexPrinceton 14 апр. 2014, в 09:22

0

Да, я знаю, что такое позиционирование возможно, но я не собираюсь так делать.
user258459 14 апр. 2014, в 12:03
0

попробуйте поплавок: слева;
AlexPrinceton 14 апр. 2014, в 12:08