Блог

Главная - Вопросы по программированию - поместите изображение рядом с div

поместите изображение рядом с div

#javascript #html #css

Вопрос:

У меня есть это, которое в основном представляет собой таблицу с двумя столбцами, и я изо всех сил стараюсь сделать элементы в указанной таблице мобильными:

 setTimeout(function() {  odometer.innerHTML = '1925'  }) 
 .fiftyFiftySection {  background-color: #000;  }  .odometer {  font-size: 3em;  text-align: center;  width: 180px;  }  table td{  column-width: 1000px;  text-align: center;  }  #dollarSign {  height: 50px;   width: 30px;  }  #fiftyFiftySignImage {  width:400px;   height:300px;   margin-left: -100px;  }  @media (max-width: 500px) {  table td{  column-width: 100px;  text-align: left;  }  #dollarSign {  /* uncomment out display when you want it to display */  /* display: none; */  width: 20px;  height: 20px;  }  #currentEstimatedPayout {  display: none;  }  #odometer {  margin-right: 50px;  margin-top: 20px;  }  #fiftyFiftySignImage {  width:300px;   height:200px;  margin-left: -50px;  }  } 
 lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/odometer@0.4.8/themes/odometer-theme-train-station.css"gt;   lt;script src="https://cdn.jsdelivr.net/npm/odometer@0.4.8/odometer.min.js"gt;lt;/scriptgt; lt;section class="fiftyFiftySection" id="fiftyFiftySection"gt;  lt;tablegt;  lt;trgt;  lt;thgt;lt;/thgt;  lt;thgt;lt;/thgt;   lt;/trgt;  lt;trgt;  lt;tdgt;  lt;img id="fiftyFiftySignImage" src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png"gt;  lt;/tdgt;   lt;tdgt;  lt;h4 id="currentEstimatedPayout" style="color: #ffffff;"gt;Current Estimated Payoutlt;/h4gt;  lt;!-- lt;brgt; --gt;  lt;img id="dollarSign" src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt=""gt;lt;div id="odometer" class="odometer"gt;000000lt;/divgt;  lt;/tdgt;  lt;/trgt;  lt;/tablegt; lt;/sectiongt;

но, как вы можете видеть, в мобильной версии он ставит dollar sign image поверх одометра, когда он мне нужен рядом с ним! Я не знаю, как это исправить, я перепробовал так много разных вещей. есть какие-нибудь идеи?

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

1. lt;divgt; s по умолчанию занимают всю отведенную ширину. Я бы либо стилизовал изображение вашего знака доллара и одометра с поплавками, либо превратил ваш одометр в span .

2. Таблицы следует использовать для отображения данных, а не для создания компоновок. Более современные решения используют поплавки, flexbox или сетку

Ответ №1:

Добавьте a div и используйте flex для выравнивания.

 setTimeout(function() {  odometer.innerHTML = '1925'  }) 
 .fiftyFiftySection {  background-color: #000;  }  .odometer {  font-size: 3em;  text-align: center;  width: 180px;  }  table td{  column-width: 1000px;  text-align: center;  }  #dollarSign {  height: 50px;   width: 30px;  }  #fiftyFiftySignImage {  width:400px;   height:300px;   margin-left: -100px;  }  @media (max-width: 500px) {  table td{  column-width: 100px;  text-align: left;  }  #dollarSign {  /* uncomment out display when you want it to display */  /* display: none; */  width: 20px;  height: 20px;  }  #currentEstimatedPayout {  display: none;  }  #odometer {  margin-right: 50px;  margin-top: 20px;  }  #fiftyFiftySignImage {  width:300px;   height:200px;  margin-left: -50px;  }  } 
 lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/odometer@0.4.8/themes/odometer-theme-train-station.css"gt;   lt;script src="https://cdn.jsdelivr.net/npm/odometer@0.4.8/odometer.min.js"gt;lt;/scriptgt; lt;section class="fiftyFiftySection" id="fiftyFiftySection"gt;  lt;tablegt;  lt;trgt;  lt;thgt;lt;/thgt;  lt;thgt;lt;/thgt;   lt;/trgt;  lt;trgt;  lt;tdgt;  lt;img id="fiftyFiftySignImage" src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png"gt;  lt;/tdgt;   lt;tdgt;  lt;h4 id="currentEstimatedPayout" style="color: #ffffff;"gt;Current Estimated Payoutlt;/h4gt;  lt;!-- lt;brgt; --gt;  lt;div style=" display: flex; justify-content: center; align-items: center; "gt;  lt;img id="dollarSign" src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt=""gt;lt;div id="odometer" class="odometer"gt;000000lt;/divgt;   lt;/tdgt;   lt;/trgt;  lt;/tablegt; lt;/sectiongt;

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

1. это действительно фантастика. Спасибо. единственное, на мобильном телефоне это уменьшает odometer ширину, но теперь я не могу понять, как настроить ее ширину из-за нового кода. Не могли бы вы указать мне правильное направление?

2. НЕВАЖНО, я понял!

Ответ №2:

Используйте этот код.

 #dollarSign {  vertical-align: middle; }
Метки: