Как мне добавить изображение рядом с таблицей

ProgramBox

Как мне добавить изображение рядом с таблицей

Post author:admin
Запись опубликована:26 декабря, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я хочу добавить изображение рядом с таблицей, чтобы оно отображало img.

Я попытался сделать img float слева, но, похоже, это не работает. Если бы кто-нибудь мог поместить значение так, чтобы оно плавало параллельно или рядом с таблицей, это было бы здорово

Мой код:

 #toppings {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: -10px;
}

#toppings td, #toppings th {
  border: 1px solid #ddd;
  padding: 0px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

#toppings th {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  background-color: #000000;
  color: white;
}

 <table id="toppings">
  <tr>
    <th>Rank</th>
    <th>Team</th>
    <th>Record</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Yugoslavia</td>
    <td>180-2</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Argentina</td>
    <td>172-10</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Germany</td>
    <td>160-22</td>
  </tr>
</table>

Развернуть фрагмент

Спасибо

Ответ №1:

Это будет работать..

HTML :
Изображение завернуто в div с идентификатором #imgdiv , таблица завернута в другую div #datadiv , и оба они завернуты в #container div.

 <div id="container">
   <div id="imgdiv">
      <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" width="100px"/>
   </div>
   <div id="datadiv">
      <table>
         <tr>
            <th>Rank</th>
            <th>Team</th>
            <th>Record</th>
         </tr>
         <tr>
            <td>1</td>
            <td>Yugoslavia</td>
            <td>180-2</td>
         </tr>
         <tr>
            <td>2</td>
            <td>Argentina</td>
            <td>172-10</td>
         </tr>
         <tr>
            <td>3</td>
            <td>Germany</td>
            <td>160-22</td>
         </tr>
      </table>
   </div>
</div>

CSS :
Добавлен стиль для #imgdiv #datadiv #container .

 #toppings {
   font-family: Arial, Helvetica, sans-serif;
   border-collapse: collapse;
   width: -10px;
}

#toppings td, #toppings th {
  border: 1px solid #ddd;
  padding: 0px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

#toppings th {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  background-color: #000000;
  color: white;
}

#imgdiv
{
   float:left;
}
#datadiv
{
   float:right
}
#container
{
   display: inline-block
}

1. Спасибо, просто хотел спросить, возможно ли, чтобы они не слипались? Я попытался настроить значение px, но это не сработало. Спасибо

2. Я попытался использовать margin, и это также не работает,

3. Замените существующий #imgdiv этим в CSS : #imgdiv { float:left; padding:0px 20px 0px 0px;}

4. padding:0px 20px 0px 0px; будет работать для вас. Дайте мне знать, если вы используете bootstrap в этом, я покажу вам, как добиться этого и в bootstrap. Дайте мне знать, если у вас есть какие-либо дополнительные запросы.

5. padding:0px 20px 0px 0px; Где первый аргумент 0px для верхнего поля , второй аргумент 20px для правого поля , третий 0px для нижнего поля , последний 0px для левого поля .

Ответ №2:

Поскольку это нигде не упоминается, я предполагаю, что вам нужно выровнять изображение справа от таблицы, потому float:left что это сработает для выравнивания изображения слева от таблицы.

Чтобы выровнять изображение справа от таблицы, используйте display:inline-block как для изображения, так и для таблицы. Кроме того, вы также можете использовать vertical-align:top для выравнивания верхней части изображения с верхней частью таблицы.

Вот полный код:

HTML — код

 <table id="toppings">
    <tr>
        <th>Rank</th>
        <th>Team</th>
        <th>Record</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Yugoslavia</td>
        <td>180-2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Argentina</td>
        <td>172-10</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Germany</td>
        <td>160-22</td>
    </tr>
</table>
<img className="testtableimage" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

Код CSS

 #toppings {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: -10px;
  display:inline-block;
}

#toppings td, #toppings th {
  border: 1px solid #ddd;
  padding: 0px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

#toppings th {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  background-color: #000000;
  color: white;
}
.testtableimage{display:inline-block;vertical-align:top;width:200px;}