Блог

Главная - Вопросы по программированию - Я пытаюсь отредактировать страницу ХОЛСТА, но я думаю, что я сделал что-то не так со встроенным блоком, поэтому мое изображение и текст не находятся рядом

Я пытаюсь отредактировать страницу ХОЛСТА, но я думаю, что я сделал что-то не так со встроенным блоком, поэтому мое изображение и текст не находятся рядом

#html #inline

#HTML #встроенный

Вопрос:

Обычно я бы использовал страницу CSS, но я не думаю, что смогу сделать это с canvas: (

 <div id="Bell_hooks" class="">
<h3><i class="fas fa-chalkboard-teacher" aria-hidden="true"> </i>Philosopher's perspective - <em>Bell Hooks</em></h3>
</div>
<div style="display: flex;">
<div>
<p><img src="https://info.umkc.edu/womenc/wp-content/uploads/2015/12/bellhook.jpg" alt="Bell Hooks" width="300" height="366" /></p>
</div>
<div>
<p>In her 1999 book "All about love" Bell Hooks comments on both the romance culture of today's world and the subtle sexism embedded into our everyday love life. In the first few chapters of book, Hooks brings up the state of the newer generations' views on love, in which she states how she was "sad" and "appalled" at how the younger regards love and romance culture, quoting the reply of someone she had interviewed: "Love what's that, I have never had any love in my life". Hooks comments on the more modern view on love, in which claims that more and more younger people are defining love as something "for the naamp;iuml;ve, the weak, the hopelessly romantic.". After bringing up her viewpoint, Hooks presents a theory in which she theorises that our cynicism stems from the reoccurring feeling that love will not and cannot be found, on which she expands by theorising that this is ultimately because we are simply trying hide behind the mask of cynicism to hide our disappointed and betrayed heart. In her book, Hooks quotes multiple other philosophical works such as When all you've ever wanted isn't enough (Harold Kushner) and Bitch: In Praise of Difficult Women (Elizabeth Wurtzel), in which both works theorise that the newer generation are growing up much more apprehensive about loving, and that "None of us are getting better at loving: we are getting more scared of it."</p>
</div>
</div>

это мой полный код, но как только я добавляю гибкий дисплей, изображение сжимается до размера одной строки текста, есть ли способ это исправить?

вот как это выглядит сейчас

введите описание изображения здесь

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

1. потому что ваш верхний div заполняется width , поэтому нижний div становится нижним

Ответ №1:

Это пример использования flexbox . Оберните ваши divas в a container и дайте ему a display: flex .

 <div class="container" style="display: flex">
  <div>
      <img src="https://info.umkc.edu/womenc/wp-content/uploads/2015/12/bellhook.jpg" alt="Bell Hooks" width="300" height="366">
  </div>
  <div>
      <p>In her 1999 book "All about love"  Bell Hooks comments on both the romance culture of today's world and the subtle sexism embedded into our everyday love life</p>
  </div>
</div>

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

1. Я не могу использовать css, смогу ли я сделать <div style = «display: flex»> ?

2. ДА. Я переделал ответ. Проверьте, пожалуйста

3. изображение уменьшилось до размера одной строки, как только я добавил больше текста, могу ли я это исправить?

4. Что вы имеете в виду? Изменился ли размер изображения на одну строку? Возможно, есть другие фрагменты кода, которые способствуют этому. Удалите p тег, который обертывает ваш img тег изображением.

5. Я запускаю ваш обновленный код, и он работает хорошо. Сделайте снимок экрана с проблемой.