0

проблема такая, сделал блок событий, строка переносится под картинку, а мне нужно чтобы переносилась под начало ссылки, прошу вашей помощи в решении.

проблема

Код блока:

.title__block-center {
  display: flex;
  justify-content: center;
  background-color: #272727;
  width: 100%;
  max-width: 774px;
  height: 100%;
  max-height: 20px;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}

.title__block-center h3 {
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  padding: 3px 20px;
}

.content_events {
  width: 774px;
  height: 600px;
  padding-top: 20px;
  background-color: #484848;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
  border-radius: 0px 0px 5px 5px;
}

.img__events {
  width: 120px;
  height: 80px;
  margin: 0 20px;
  vertical-align: middle;
  border-radius: 5px;
}

.time__events {
  font-weight: 600;
  font-size: 13px;
  color: #767676;
}

.content_events-link {
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  margin: 0 20px;
  transition: color .3s ease;
}

.content_events-link:hover {
  color: #949494;
}

.hr_block-content {
  width: 734px;
  margin: 20px auto 20px;
  background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2), transparent);
  border: 0;
  height: 1px;
  box-sizing: content-box;
  display: block;
}
<div class="content">
  <div class="title__block-center">
    <h3>События</h3>
  </div>
  <div class="content_events">
    <img class="img__events" src="img/events/events-1.jpg" alt="">
    <time class="time__events" datetime="2022-04-11">11.04.2022</time>
    <a class="content_events-link" href="#">Сбор гуманитарной помощи для прибывших беженцев</a>
    <hr class="hr_block-content">
    <img class="img__events" src="img/events/events-2.jpg" alt="">
    <time class="time__events" datetime="2022-04-04">04.04.2022</time>
    <a class="content_events-link" href="#">2022 - Год культурного наследия народов России</a>
    <hr class="hr_block-content">
    <img class="img__events" src="img/events/events-3.jpg" alt="">
    <time class="time__events" datetime="2022-03-22">22.03.2022</time>
    <a class="content_events-link" href="#">Всероссийский конкурс лучших проектов создания комфортной городской среды</a>
    <hr class="hr_block-content">
    <img class="img__events" src="img/events/events-4.jpg" alt="">
    <time class="time__events" datetime="2022-03-03">03.03.2022</time>
    <a class="content_events-link" href="#">Формирование комфортной городской среды</a>
    <hr class="hr_block-content">
    <img class="img__events" src="img/events/events-5.jpg" alt="">
    <time class="time__events" datetime="2022-06-02">02.06.2021</time>
    <a class="content_events-link" href="#">Военная история России в событиях</a>
    <hr class="hr_block-content">
  </div>
</div>

1 ответ 1

1

Думаю, вам немного нужно переделать верстку на такой вариант

.title__block-center {
  display: flex;
  justify-content: center;
  background-color: #272727;
  width: 100%;
  height: 100%;
  max-height: 20px;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}

.title__block-center h3 {
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  padding: 3px 20px;
}

.content_events {
  height: 600px;
  padding-top: 20px;
  background-color: #484848;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
  border-radius: 0px 0px 5px 5px;
}

.img__events {
  width: 120px;
  height: 80px;
  margin: 0 20px;
  vertical-align: middle;
  border-radius: 5px;
}

.time__events {
  font-weight: 600;
  font-size: 13px;
  color: #767676;
}

.content_events-link {
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  margin: 0 20px;
  transition: color .3s ease;
}

.content_events-link:hover {
  color: #949494;
}

.hr_block-content {
  width: 734px;
  margin: 20px auto 20px;
  background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2), transparent);
  border: 0;
  height: 1px;
  box-sizing: content-box;
  display: block;
}
.wrapp {
    display: flex;
    align-items: center;
}
.wrapp__news {
    display: flex;
    align-items: center;
}
<div class="content">
  <div class="title__block-center">
    <h3>События</h3>
  </div>
  <div class="content_events">
    <div class="wrapp">
        <div class="wrapp__img">
            <img class="img__events" src="img/events/events-1.jpg" alt="">
        </div>
        <div class="wrapp__news">
            <time class="time__events" datetime="2022-04-11">11.04.2022</time>
             <a class="content_events-link" href="#">Сбор гуманитарной помощи для прибывших беженцев Сбор гуманитарной помощи для прибывших беженцев Сбор гуманитарной помощи для прибывших беженцев Сбор гуманитарной помощи для прибывших беженцев </a>
        </div>
    </div>
    <hr class="hr_block-content">

    <div class="wrapp">
        <div class="wrapp__img">
            <img class="img__events" src="img/events/events-1.jpg" alt="">
        </div>
        <div class="wrapp__news">
            <time class="time__events" datetime="2022-04-11">11.04.2022</time>
             <a class="content_events-link" href="#">Сбор гуманитарной помощи для прибывших беженцев Сбор гуманитарной помощи для прибывших беженцев Сбор гуманитарной помощи для прибывших беженцев Сбор гуманитарной помощи для прибывших беженцев </a>
        </div>
    </div>
    <hr class="hr_block-content">

    <div class="wrapp">
        <div class="wrapp__img">
            <img class="img__events" src="img/events/events-1.jpg" alt="">
        </div>
        <div class="wrapp__news">
            <time class="time__events" datetime="2022-04-11">11.04.2022</time>
             <a class="content_events-link" href="#">Сбор гуманитарной помощи для прибывших беженцев Сбор гуманитарной помощи для прибывших беженцев Сбор гуманитарной помощи для прибывших беженцев Сбор гуманитарной помощи для прибывших беженцев </a>
        </div>
    </div>
    <hr class="hr_block-content">
    
    
  </div>
</div>

Ваш ответ

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

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