Блог

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

Как я могу расположить изображение таким образом?

#html

#HTML

Вопрос:

Как я могу поместить изображение href в ту же строку, что и другое? Я попробовал padding-bottom, но он этого не сделает.(граница такова, что я могу видеть, куда она должна входить). По какой-то причине я не могу найти, как разместить один из них рядом с другим. У меня есть этот html:

 <h1 style="padding-left:25px">Wholesome Clips</h1>
  <div class = "imagesBox" style="padding-left:40px;">
  <a href="https://www.twitch.tv/legion_exordiri/clip/CautiousTameTruffleHassanChop?filter=clipsamp;range=allamp;sort=time" target="_blank" >
     <img style="border:groove;" src="https://clips-media-assets2.twitch.tv/AT-cm|923609230-preview-260x147.jpg" title="Click here!" alt="The thumbnail for this clip couldn't be loaded." width="500" height="300"></img>
     <h3>Chat said you're very cool...</h3>
  </a>
  <a href="https://www.twitch.tv/legion_exordiri/clip/RelievedMotionlessLasagnaAMPEnergy?filter=clipsamp;range=allamp;sort=time" target="_blank">
    <img style="border:groove;" src="https://clips-media-assets2.twitch.tv/AT-cm|911141051-preview-260x147.jpg" title="Click here!" alt="The thumbnail for this clip couldn't be loaded." width="500" height="300"></img>
     <h3>Adorable High Five</h3>
  </a>
    <p id="counterPoggers"></p>
</div>

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

1. вы хотите, чтобы оба изображения были рядом?

2. да, в основном это то, к чему я стремлюсь.

3. Если один из ответов правильный, пожалуйста, отметьте ответ, чтобы мы могли закрыть этот пост. Спасибо

Ответ №1:

Используйте flex с flex-direction: row :

 .imagesBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
} 
 <h1 style="padding-left:25px">Wholesome Clips</h1>
<div class="imagesBox" style="padding-left:40px;">
<div>
  <a href="https://www.twitch.tv/legion_exordiri/clip/CautiousTameTruffleHassanChop?filter=clipsamp;range=allamp;sort=time" target="_blank">
    <img style="border:groove;" src="https://clips-media-assets2.twitch.tv/AT-cm|923609230-preview-260x147.jpg" title="Click here!" alt="The thumbnail for this clip couldn't be loaded." width="500" height="300"></img>
    <h3>Chat said you're very cool...</h3>
  </a>
  </div>
  <a href="https://www.twitch.tv/legion_exordiri/clip/RelievedMotionlessLasagnaAMPEnergy?filter=clipsamp;range=allamp;sort=time" target="_blank">
    <img style="border:groove;" src="https://clips-media-assets2.twitch.tv/AT-cm|911141051-preview-260x147.jpg" title="Click here!" alt="The thumbnail for this clip couldn't be loaded." width="500" height="300"></img>
    <h3>Adorable High Five</h3>
  </a>
  <p id="counterPoggers"></p>
</div>

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

1. Это работает, но изображения стали очень маленькими, как я могу настроить их размер?

2. @MusicAllen Я изменил width и height изображений, чтобы они соответствовали приведенному здесь фрагменту. Вы должны оставить их такими же, какими они были, я добавлю примечание в свой ответ

3. Извините, я этого не заметил. Я думал, что оно просто автоматически стало такого размера.

4. @MusicAllen нет, я виноват 🙂 Я исправил свой ответ

Ответ №2:

Это может быть достигнуто многими способами. Вы можете использовать flexbox.

Добавьте display: flex в свой div

 <div class = "imagesBox" style="display: flex">
  //...
</div>
 
 <h1 style="padding-left:25px">Wholesome Clips</h1>
  <div class = "imagesBox" style="display: flex">
  <a href="https://www.twitch.tv/legion_exordiri/clip/CautiousTameTruffleHassanChop?filter=clipsamp;range=allamp;sort=time" target="_blank" >
     <img style="border:groove;" src="https://clips-media-assets2.twitch.tv/AT-cm|923609230-preview-260x147.jpg" title="Click here!" alt="The thumbnail for this clip couldn't be loaded." width="500" height="300"></img>
     <h3>Chat said you're very cool...</h3>
  </a>
  <a href="https://www.twitch.tv/legion_exordiri/clip/RelievedMotionlessLasagnaAMPEnergy?filter=clipsamp;range=allamp;sort=time" target="_blank">
    <img style="border:groove;" src="https://clips-media-assets2.twitch.tv/AT-cm|911141051-preview-260x147.jpg" title="Click here!" alt="The thumbnail for this clip couldn't be loaded." width="500" height="300"></img>
     <h3>Adorable High Five</h3>
  </a>
    <p id="counterPoggers"></p>
</div>