Блог

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

Как выровнять текст рядом с изображением, если изображение больше?

#html #css

Вопрос:

Это мой код, который работает — платформа подержанного автомобиля — HTML с гибким интерфейсом, но не совсем эстетически приятен:

 body {
  font-family: Verdana, sans-serif;
  font-size: 16px;
  line-height: 18px;
}

header.infog {
  background-color: #333;
  color: #FFF;
  margin-bottom: 25px;
  padding: 30px;
}

footer.infog {
  background-color: #333;
  color: #FFF;
  margin-top: 20px;
  margin-bottom: 25px;
  padding: 10px;
}

.mainwrapper {
  border: 2px solid;
  display: table;
  margin-left: 50px;
  width: 900px;
}

.itemwrapper {
  display: table-row;
  width: 90px;
  margin-right: -40px;
}

.itemwrapper1 {
  display: table-row;
  margin-left: -356em;
  width: 100px;
}

.itemwrapper1 img {}

.some-page-wrapper {
  margin: 15px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  margin-left: 40px;
  width: 600px;
  color: #333;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  padding: 20px;
}

.column1 {
  margin-left: 40px;
  background-color: blue;
  color: #FFF;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-basis: 100%;
  flex: 1;
  padding: 20px;
}

.priceg {
  font-size: 29px;
  color: red;
  padding-left: 500px;
}

.img-nac img {
  max-width: 330px;
}

.img-nac1 img {
  max-width: 460px;
}

.ncat {
  flex-direction: row;
  margin-left: -450px;
  text-align: right 50px;
}

.ncat1 {
  flex-direction: row;
  margin-left: -200px;
  text-align: right 50px;
}

.at1 {
  white-space: nowrap;
  margin-top: -20px;
}

.priceh {
  margin-left: 180px;
  margin-top: -20px;
}

.mainwrapper {
  margin-bottom: 20px;
} 
 <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Car , Van, Caravan Dealer | Quality Used Cars</title>
  <link rel="stylesheet" type="text/css" href="styles/style.css">
</head>

<body>
  <header class="infog">
    header
  </header>
  <div class='some-page-wrapper'>
    <div class='row'>
      <div class='column1'>
        2003 TOYOTA RAV4 2.0 GX
      </div>
      <div class='column1 priceg'>
        £8995
      </div>
    </div>
    <div class='row'>
      <div class='column img-nac'>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
      </div>
      <div class='column ncat'>
        black
      </div>
    </div>
  </div>
  <div class='some-page-wrapper'>
    <div class='row'>
      <div class='column1'>
        2003 TOYOTA RAV4 2.0 GX
      </div>
      <div class='column1 priceg'>
        £8995
      </div>
    </div>
    <div class='row'>
      <div class='column img-nac1'>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
      </div>
      <div class='column ncat'>
        rowtt
      </div>
    </div>
  </div>
  <div class='some-page-wrapper'>
    <div class='row'>
      <div class='column img-nac'>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
      </div>
      <div class='column at1'>
        <h3>2004 TOYOTA RAV4 2.0</h4>
          black
      </div>
      <div class='column priceh'>
        <h3>£6000</h4>
      </div>
    </div>
  </div>
  <footer class="infog">
    footer
  </footer>
</body>

</html>

Проблема в том, что я пытаюсь сделать так, чтобы, если изображение большое, оно все равно было рядом с текстом, как это на моей странице:
Изображение
Синяя линия ниже на самом деле является частью следующего изображения… Я плохо просмотрел видео.

Я не понял, как с помощью CSS и размера максимальной ширины это сделать, в результате чего: Второе изображение

Описание автомобиля во втором гибком поле (классы столбцов и ncat) не отображается.

Но это прекрасно работает с изображением меньшего размера; я пытаюсь сделать его достаточно большим, чтобы люди могли его видеть.

Это не окончательная версия, так как я добавляю шрифт Roboto и т. Д. В CSS, Но он почти работает.

Я был бы очень признателен за любые советы о том, как обеспечить, чтобы это работало в flexbox.

Ответ №1:

Просто обновите свой CSS следующим кодом

 body {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    line-height: 18px;
  }
  
  header.infog {
    background-color: #333;
    color: #FFF;
    margin-bottom: 25px;
    padding: 30px;
  }
  
  footer.infog {
    background-color: #333;
    color: #FFF;
    margin-top: 20px;
    margin-bottom: 25px;
    padding: 10px;
  }
  
  .mainwrapper {
    border: 2px solid;
    display: table;
    margin-left: 50px;
    width: 900px;
  }
  
  .itemwrapper {
    display: table-row;
    width: 90px;
    margin-right: -40px;
  }
  
  .itemwrapper1 {
    display: table-row;
    margin-left: -356em;
    width: 100px;
  }
  
  .some-page-wrapper {
    margin: 15px;
  }
  
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .column {
    margin-left: 40px;
    color: #333;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
  }
  
  .column1 {
    margin-left: 40px;
    background-color: blue;
    color: #FFF;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-basis: 100%;
    flex: 1;
    padding: 20px;
  }
  
  .priceg {
    font-size: 29px;
    color: red;
    padding-left: 500px;
  }
  
  .img-nac img {
    max-width: 330px;
  }
  
  .img-nac1 img {
    max-width: 460px;
  }
  
  .ncat {
    flex-direction: row;
    text-align: right 50px;
  }
  
  .ncat1 {
    flex-direction: row;
    text-align: right 50px;
  }
  
  .at1 {
    white-space: nowrap;
    margin-top: -20px;
  }
  
  .priceh {
    margin-left: 180px;
    margin-top: -20px;
  }
  
  .mainwrapper {
    margin-bottom: 20px;
  }
Метки: ,