Выравнивание двух элементов CSS рядом с eachother

Я пытаюсь выровнять два div вместе с помощью встроенного блока, но у меня есть некоторые странные проблемы с этим, я попытался использовать float и имел ту же проблему.Выравнивание двух элементов CSS рядом с eachother

Вот пример того, что происходит:

Они должны быть рядом друг с другом, но они неровные.

Вот мой CSS:

#content .articlehs h3 { 
    margin-top: 0px; 
    font-family: 'New Rocker', cursive; 
    background: url("../img/article_head.png") repeat-x; 
    border: 2px solid background: url("../img/asbg.png") repeat-x; 
    padding: 10px 20px; 
} 

#content .articlehs p { 
    background: url("../img/asbg.png") repeat-x; 
    padding: 10px 20px 20px; 
} 

#content .articlehs { 
    display: inline-block; 
    background: url("../img/asbg.png") repeat-x; 
    width: 50%; 
    margin-left: 10%; 
    margin-top: 10px; 
} 

#content .articleSidebar h3 { 
    margin-top: 0px; 
    font-family: 'New Rocker', cursive; 
    background: url("../img/article_head.png") repeat-x; 
    border: 2px solid background: url("../img/asbg.png") repeat-x; 
    padding: 10px 20px; 
} 

#content .articleSidebar p { 
    background: url("../img/asbg.png") repeat-x; 
    padding: 10px 20px 20px; 
} 

#content .articleSidebar { 
    display: inline-block; 
    background: url("../img/asbg.png") repeat-x; 
    width: 20%; 
    margin-left: 10%; 
    margin-top: 40px; 
}

Я загрузил некоторые примеры кода для jsfiddle, https://jsfiddle.net/sj851u5z/ Хотите знать, если кто-то может помочь мне с этим, как я пробовал много разных вещей, не повезло :(Спасибо

источник

2016-05-07 bloodless2010

Для меня, они выравниваются ... Я не понимаю ваш вопрос ... – Akxe

Если я правильно понимаю ваш вопрос, вам просто нужно добавить vertical-align: top; к вашему #content .articlehs декларации.

#content .articlehs { 
    display: inline-block; 
    background: url("../img/asbg.png") repeat-x; 
    width: 50%; 
    margin-left: 10%; 
    margin-top: 10px; 
    vertical-align: top; 
}

источник

2016-05-07 21:58:52

Это было быстро! не понимал, что это было такое простое исправление, большое спасибо. – bloodless2010

Нет проблем :) Когда это разрешено, отметьте как принято, если это поможет :) –

** ПРИМЕЧАНИЕ: ** [вертикальное выравнивание] (https://developer.mozilla.org/en-US/docs/Web/ CSS/vertical-align) работает для элементов inline-уровня и table-cell. Это также относится к [:: first-letter] (https://developer.mozilla.org/en-US/docs/Web/CSS/::first -letter) и [:: first-line] (https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line). –

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

У вас разные размеры для margin-top на изделии и на боковой панели. Я сделал их одинаковыми.

Тег center не нужен, а также нажимает тип вниз на боковой панели. Это должно быть удалено, поскольку оно устарело в любом случае, а теги p должны быть центрированы с помощью CSS.

Хотя вы можете использовать элементы inline-block, чтобы получить их рядом друг с другом, я бы сказал, что поплавки - лучший способ пойти сюда. Поэтому я добавил float слева как для статьи, так и для боковой панели, чтобы дать вам выравнивание.

https://jsfiddle.net/sj851u5z/2/

источник

2016-05-07 22:07:37 Sarcoma

Использование Flexbox:

#content { 
    display: flex; 
    } 

    p { 
    text-align: center 
    } 

    #content .articlehs { 
    width: 50%; 
    margin-left: 10%; 
    margin-top: 10px; 
    } 

    #content .articleSidebar { 
    width: 20%; 
    margin-left: 10%; 
    margin-top: 40px; 
}

https://jsfiddle.net/t35szgpc/1/

источник

2016-05-07 22:20:19

Выравнивание двух элементов CSS рядом с eachother

ответ

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