Блог

Главная - Вопросы по программированию - Текст не переносится, вместо этого выбирает переход под

Текст не переносится, вместо этого выбирает переход под

#html #css

#HTML #css

Вопрос:

Моя проблема
Итак, я пытаюсь создать раздел новостей для своего веб-сайта. Каждый раздел содержит заголовок, изображение и саму статью. Проблема в том, что текст статьи откажется помещаться рядом с изображением, если я не использую <br> , чтобы разбить его самостоятельно.

Описание
Все элементы каждого раздела перечислены в одном элементе div. Раздел включает заголовок, изображение и статью. После этого у изображения появляется свой собственный класс, а статья также после CSS.

  1. Заголовок является блочным элементом
  2. Изображение представляет собой элемент встроенного блока
  3. Статья представляет собой элемент встроенного блока

HTML-КОД (НАЧИНАЯ С ОКНА НОВОСТЕЙ, НЕ ВКЛЮЧАЯ панель навигации И ВЫШЕ)

 <div id=newsboard>
    <div class=newsboard_topic>
        <h1>Website in Development!</h1>
        <img src="/image/newsboard/construction.gif" alt="Dev">
        <p class=newsboard_topic_article>
            Greetings!
            <br>The GeoVillage website is currently under construction, but feel free to register and login to check out the stuff we have so far!
            <br>- Geo Jones 
            <br>Owner and Developer
        </p>
    </div>
    <div class=newsboard_topic>
        <h1>kimmy and donald!</h1>
        <img class=newsboard_topic_picture src="/image/newsboard/kimdon.jpg" alt="kimmyanddonald">
        <p class=newsboard_topic_article>
            The fan fiction of Donald Trump and Kim Jong Un! Yes, they photoshopepd it. This is a test by the way to test the standing of articles.
        </p>
    </div>
</div>

CSS-КОД ДЛЯ РАЗДЕЛА HTML

 #newsboard {
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 25px;
    margin-bottom: 25px;
    border-color: #0099FF;
    border-style: solid;
    border-width: 5px;
}

.newsboard_topic {
    padding: 20px;
    display: block;
}

.newsboard_topic_article {
    display: inline-block;
    vertical-align: top;
    word-wrap: break-word;
    margin: 0px;
    padding: 10px;
}

.newsboard_topic_picture {
    display: inline-block;
}

ЖИВОЙ ПРИМЕР
в настоящее время находится на geo-village.com

Ответ №1:

Сделайте изображение плавающим элементом внутри текстового контейнера, тогда текст будет плавать рядом с ним (и под ним, если он длиннее)

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

1. Добавлено значение float:left; в .newsboard_topic_picture. не работает.

2.Вы поместили это В .newsboard_topic_article <p> тег, как я написал?

3. Да. Попытался поместить float: right; в .newsboard_topic_article, сделал только хуже.

4. Нет, в p теге нет значения float — <img> тег (с float: left ) должен находиться ВНУТРИ <p> тега (без значения float, но display: block !)

5. Хорошо. НОВЫЙ HTML-КОД: #newsboard { поле слева: 100 пикселей; поле справа: 100 пикселей; верхнее поле: 25 пикселей; нижнее поле: 25 пикселей; цвет границы: #0099FF; стиль границы: сплошной; ширина границы: 5 пикселей; } .newsboard_topic { отступ: 20 пикселей; отображение: блок; } .newsboard_topic_article { отображение: встроенный блок; выравнивание по вертикали: сверху; перенос слов: разрыв слова; поле: 0px; отступ: 10px; } .newsboard_topic_picture { отображение: блок; с плавающей точкой: слева; }

Ответ №2:

Отделите свой newsboard_topic класс.

     <div class=newsboard_topic>
        <img src="/image/newsboard/construction.gif" alt="Dev">
        <h1>Website in Development!</h1>

    </div>

 <p class=newsboard_topic_article>
            Greetings!
            <br>The GeoVillage website is currently under construction, but feel free to register and login to check out the stuff we have so far!
            <br>- Geo Jones 
            <br>Owner and Developer
        </p>

Затем дайте вашему newsboard_topic классу a display:flex; .

 .newsboard_topic {
    padding: 20px;
    display: flex;
}

Ответ №3:

Я думаю, что очевидный ответ, который никто не хотел давать, который сделал бы большую часть вашего кодирования более плавным, таков… Загрузка. Если вы учитесь программировать, я настоятельно рекомендую изучить некоторые из отличных доступных решений с открытым исходным кодом. 

 <div class="row">
    <div class="col-md-5">
        <h1>Website in Development!</h1>
        <img src="/image/newsboard/construction.gif" alt="Dev">
    </div>
    <div class="col-md-5">
        <p class=newsboard_topic_article>
        Greetings!
        <br>The GeoVillage website is currently under construction, but feel free to register and login to check out the stuff we have so far!
        <br>- Geo Jones 
        <br>Owner and Developer
        </p>
    </div>
</div>