Блог

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

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

#html #css

Вопрос:

В настоящее время я работаю над проектом, и мне нужно выровнять текст по центру рядом с изображением справа в полях flex. Я настроил родительский и дочерний классы так, чтобы они могли отображать текст, но я не буду перемещаться в правую сторону.

вот как это выглядит в настоящее время

вот как это должно выглядеть

вот html и CSS кода

 .thesis-main-container h1 {
  text-align: center;
  padding: 2rem;
}

.thesis-container {
  display: flex;
}

.thesis-main {
  justify-content: center;
  align-items: center;
  padding: 2rem;
  flex: 1;
}

.thesis-sidebar {
  flex: 0 0 40%;
  display: flex;
  flex: wrap;
}

.thesis-sidebar img {
  width: 35%;
  height: auto;
}

.img-box {
  width: 300px;
}

.img-box img {
  width: 100%;
  flex: 0 0 300px;
}

.info-box {
  padding: 1rem;
} 
 <div class="thesis-main-container">
  <h1.>Thesis Exhibt</h1>
    <div class="thesis-container">
      <!----Parent class-->

      <section class="thesis-main">
        <!----Child class-->
        <video video controls autoplay loop width=100% src="assests/videos/thesis.mp4"></video>
        <h2>Reimagine Urban</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum similique impedit iure.</p>
      </section>

      <aside class="thesis-sidebar">
        <!---parent class-->
        <div class="thesis-child">
          <div class="img-box">
            <img src="assests/images/thesis-fisma.jpg" alt="">
          </div>
          <div class="info-box">
            <h3>Fisma:Design and Prototype</h3>
            <p>Design showcase of new prototype project</p>
          </div>
          <div class="thesis-child">
            <div class="img-box">
              <img src="assests/images/thesis-fisma.jpg" alt="">
            </div>
            <div class="info-box">
              <h3>Fisma:Design and Prototype</h3>
              <p>Design showcase of new prototype project</p>
            </div>
          </div>
      </aside>
      </div>
    </div>

Ответ №1:

Мне кажется, я нашел для тебя решение. В первом я обнаружил отсутствующий закрывающий div тег thesis-child , который, как я полагаю, создавал некоторые проблемы. Я удалил display: flex thesis-sidebar его и добавил в thesis-child . Надеюсь, это сработает для вас.

 .thesis-main-container h1{
    text-align: center;
    padding: 2rem;
}

.thesis-container{
    display: flex;
}

.thesis-main{
    justify-content: center;
    align-items: center;
    padding: 2rem;
    flex:1;
}

.thesis-sidebar{
/*     flex: 0 0 40%; */
/*     display: flex; */
/*     flex:wrap; */
}

.thesis-sidebar img{
    width: 35%;
    height: auto;
}
.img-box{
    width: 300px;
}

.img-box img{
    width:100%;
    flex: 0 0 300px;
}
.info-box{
    padding: 1rem;
}

.thesis-child {
  display: flex;
  align-items: center;
  padding: 15px;
} 
 <div class="thesis-main-container">
    <h1.>Thesis Exhibt</h1>
    <div class="thesis-container"> <!----Parent class-->

        <section class="thesis-main"> <!----Child class-->
            <video video controls autoplay loop  width=100% src="assests/videos/thesis.mp4"></video>
            <h2>Reimagine Urban</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum similique impedit iure.</p>
        </section>

        <aside class="thesis-sidebar"> <!---parent class-->
            <div class="thesis-child">
                <div class="img-box">
                    <img src="https://dummyimage.com/300" alt="">
                </div>
                <div class="info-box">
                    <h3>Fisma:Design and Prototype</h3>
                    <p>Design showcase of new prototype project</p>
                </div>
            </div>
            <div class="thesis-child">
                <div class="img-box">
                    <img src="https://dummyimage.com/300" alt="">
                </div>
                <div class="info-box">
                    <h3>Fisma:Design and Prototype</h3>
                    <p>Design showcase of new prototype project</p>
                </div>
            </div>
        </aside>
    </div>
</div>

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

1. Это сработало идеально, я не знаю, как я не увидел отсутствующий тег div, большое спасибо

2. Рад, что у тебя все получилось @Dkemp22. Не стесняйтесь пометить его как ответ или озвучить мой ответ. Спасибо.

Метки: