Блог

Главная - Вопросы по программированию - Статьи не отображаются как встроенные объекты на моей странице

Статьи не отображаются как встроенные объекты на моей странице

#html #css #web-deployment

Вопрос:

Помогите мне найти причину, по которой мои статьи не отображаются в одной строке, даже если указано, что они отображаются в виде элементов встроенного блока (каждая статья содержит изображение, текст h3 и абзац). Вот мой CSS-код:

 #article_1{
width: 1000px;
margin: auto;
}
  
article{
    max-width: 33%;
    display: inline-block;
}
article img{
    max-width: 100%;
}

Вот мой HTML-код:

 <body>
<header><h1>News page</h1></header>

<section id="article_1">
    <article>
        <h3>Kamal has chosen the sexiest man alive!!!</h3>
        <div id="article_img" style="background:url(./photos/sex - Copy.jpg)"></div>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. texttook a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </article>
</section>
<br>

<section id="article_1">
    <article>
        <h3>Kamal has chosen the sexiest man alive!!!</h3>
        <div id="article_img" style="background:url(./photos/sex - Copy.jpg)"></div>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. texttook a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </article>
</section>
<br>

<section id="article_1">
    <article>
        <h3>Kamal has chosen the sexiest man alive!!!</h3>
        <div id="article_img" style="background:url(./photos/sex - Copy.jpg)"></div>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. texttook a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </article>
</section>
<br>

Комментарии:

1. Не могли бы вы предоставить часть вашего HTML-кода, чтобы мы могли воспроизвести проблему и лучше помочь вам решить вашу проблему?

Ответ №1:

Основываясь на предоставленной информации, похоже, что текст переносится?

Попробуйте это

 article{
    max-width: 33%;
    display: inline-block;
    white-space: nowrap;
}

Дайте мне знать, как это работает!

Комментарии:

1. К сожалению, это не сработало, это только сделало текст выровненным.

2. Не могли бы вы предоставить нам рабочий фрагмент вашей проблемы, пожалуйста?

Метки: