0

Недавно начал изучать верстку в HTML,CSS и познакомился с FlexBox. Float, как мне сказали тема устаревшая, все верстают на flex,grid. Подскажите пожалуйста, как в flex сделать так, что бы картинки встали справа, а текст слева от них. Пробовал весь текст обернуть в один контейнер, как на данный момент картинки. Но рядом поставить не получается, хотя места в коробке хватает."Творчество"

HTML:

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Хьюстон</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <main>
     <section>
        <div class="flex-container">
          <div class="container">
            <h1 id="History">История</h1>
            <p id="Etymology, nicknames"><b>Этимология,прозвища</b></p>
            <div class="img1">
              <figure><img class="hus" src="Sam_Houston_portrait.jpg" alt="Хьюстон">
                <figcaption>Самюэл Хьюстон</figcaption>
              </figure>
              <figure><img src="Main_Street_looking_south_Houston_Texas_(1908).jpg" alt="Мэйн-Стрит">
                <figcaption>Мэйн-Стрит 1908г</figcaption>
              </figure>
              <figure><img src="Allen's_Landing_Houston_bayou_view.jpg" alt="Место основания города">
                <figcaption>Место основания города</figcaption>
              </figure>
            </div>
            <div class="text1">
              <p>
                Город назван в честь Сэмюэла Хьюстона — главнокомандующего армией Техаса
                во время Техасской революции (1835—1836) и президента Республики Техас
                (1836—1838, 1841—1844).
                Официальное прозвище Хьюстона — «Space city», которое можно перевести, как «космический
                город», «город космонавтики» или «космоград». Название дано из-за того, что здесь находится
                космический центр имени Линдона Джонсона. Всего город имеет 12 прозвищ.
                В американской разговорной речи есть популярная фраза: <strong>«Хьюстон, у нас проблема»</strong>
                (англ.
                Houston, we’ve had a problem), появившаяся после неудачной миссии Аполлон-13. В Хьюстоне
                проходили съёмки фильма «Аполлон-13», в основу сюжета которого легли реальные события миссии.
              </p>
            </div>
            <p id="Founding"><b>Основание</b></p>

            <div class="text2">
              <p>
                Allen’s Landing — место, где был основан город
                После окончания войны за независимость Техаса, в августе 1836 года предприниматели братья Август
                и Джон Аллены купили 26,9 км2 земли вдоль реки Буффало-Байю, планируя основать на ней
                населённый пункт. Они хотели, чтобы будущий город стал столицей Техаса и крупным торговым
                центром.
                Датой основания города принято считать 30 августа 1836 года, когда братья Аллены разместили
                объявление о появлении города. Город назвали в честь генерала Сэма Хьюстона, возглавлявшего
                армию техасцев в битве при Сан-Хасинто во время войны против Мексики, позже избранного
                президентом Техаса. На январь 1837 года в посёлке проживало всего 12 человек, однако через четыре
                месяца население возросло до 1 500 человек. 5 июня 1837 года город был включён в округ Гаррисберг
                (ныне Харрис) и стал временной столицей Республики Техас, которой оставался до 1839 года.
                Первым мэром Хьюстона стал Джеймс Холман.</p>
            </div>
            <p id="XX century"><b>ХХ век</b></p>
            <div class="text3">
              <p>
                В 1900 году на Хьюстон обрушился Галвестонский ураган, продолжавшийся с 27 августа по 12
                сентября. В пересчете на сегодняшний курс ущерб составил бы $526 млн, погибло 8 тысяч человек. В
                следующем году было найдено большое месторождение нефти вблизи города Бомонт, что послужило
                началом развития нефтяной промышленности в Техасе. В 1902 году президент США Теодор Рузвельт
                утвердил проект стоимостью в $1 млн на реконструкцию хьюстонского судоходного канала. К 1910
                году численность населения города достигла 78 800 человек, почти в два раза превысив количество
                жителей проживавших в Хьюстоне в 1900 году. В 1914 году президент США Вудро Вильсон принял
                участие в открытии нового глубоководного порта Хьюстона, а через год был открыт хьюстонский
                судоходный канал.
                В 1945 году было начато формирование Техасского медицинского центра. В конце 1940-х несколько
                пригородов были включены в городскую черту, в результате чего площадь Хьюстона увеличилась
                более чем в два раза. В 1950-е годы управления многих крупных (в основном нефтяных) компаний
                США переместились в Хьюстон, что благоприятно отразилось на экономике города, одним из
                поводов для переезда послужило массовое оснащение всех офисов кондиционерами.
                Именно кондиционирование воздуха! Именно оно было основой для стремительного
                роста Хьюстона в 1950 году, когда он стал наиболее оснащённым кондиционерами городом в мире.
                Именно это стимулировало многие корпорации переместить свои штаб-
                квартиры в Хьюстон.
                В 1962—1964 годах в двадцати пяти милях к югу от центра Хьюстона, на землях, переданных
                федеральному правительству университетом Райса, был построен Центр управления космическими
                кораблями, с 1973 года носящий имя Линдона Джонсона. В 1960-х годах население Хьюстона
                достигло миллиона человек.
              </p>
            </div>
          </div>
        </div>
      </section>

CSS:

.flex-container{
    display:flex;
    border: 1px solid black;
}
.container div{
    display:flex;
    border: 1px solid black;
}

.img1{
    display:inline;
    width: 250px;
    flex-direction: column;
    justify-content: flex-end;
    flex-wrap: wrap;
    
}
 


.text1{
    display: inline;
    flex-wrap: wrap;
    flex-direction: column;
    width: 400px;
;}
.text2{
    display: inline;
    flex-wrap: wrap;
    flex-direction: column;
    width: 400px;
}
.text3{
    display: inline;
    flex-wrap: wrap;
    flex-direction: column;
    width: 400px;
}

1 ответ 1

0

Вам нужно тег figure сделать флексом, тогда "дети" внутри него станут так как вам нужно, потом уже можно будет ставить как вам захочется. Ваша картинка встанет слева, а текст справа, что бы сделать наоборот или поменяйте следовательность в html или в css при помощи свойства order. например.

/* flex-элемент №1 */ 
.block__element_1{
order:1;
}

/* flex-элемент №2 */
.block__element_2{
order:2;
}
2
  • Спасибо, сейчас попробую) 16 фев 2023 в 11:54
  • 2 элемента получилось разместить(текст слева-картинку справа), но картинки не получается растянуть по всей ширине равномерно и текст поместить под заголовок и немного сжать его, что бы были на одном уровне. codepen.io/Tro11War/pen/wvEBOpX?editors=1100 16 фев 2023 в 13:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.