将两张图片放在一张上方[重复]

Posted 2023-03-21

【中文标题】将两张图片放在一张上方[重复]

【英文标题】：place two images one above the other [duplicate]

【发布时间】：2021-03-28 01:24:19

【问题描述】：

我正在寻找更新网站。目标是将“reservez”按钮放在图像“logis”上方。我的问题是，无论我做什么更改，我都有另一种样式接管并且我的更改不会生效。所以我有点绝望，我不知道如何移动图像上方的“reservez”元素。

您能帮帮我吗，我才刚刚开始，对您来说似乎很明显的事情对我来说可能并不明显。 提前致谢。 我拥有的 ： Actual Images

代码：

<div class="site-branding">
  <div class="logo-main" style="text-align: left">
    <h1 class="site-title semantic">Hotel LOGIS LA BORIE en Périgord Noir</h1>
    <a href="https://hotel-restaurant-borie.fr/" rel="home" class="site-logo"
      ><img
        id="desktop-logo"
        src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/Transparent.png"
        
        
        
      />
      <img
        id="retina-logo"
        src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/Transparent.png"
        
        
        
      />
    </a>
    <div class="tel-header">Tel. [phone]</div>
  </div>
  <div class="form-reservation">
    <div class="logo-logis">
      <a
        href="https://hotel-restaurant-borie.fr/wp-content/uploads/2020/12/sejoursur-logis.mp4"
        target="_blank"
        rel="noopener noreferrer"
      >
        <img
          src="https://hotel-restaurant-borie.fr/wp-content/uploads/2020/12/BANDEAU-MAIL-400X100px-SEJOUR-PLUS-SUR-1.jpg"
          
          style="width: 400px !important"
        />
      </a>
    </div>
    <div class="group-input">
      <div class="logo-logis">
        <a
          href="https://www.logishotels.com/fr/hotel/-254254?partid=568&amp;layout=search&amp;ref=r"
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            style="width: 105px !important"
            src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/reservez-1.png"
            
            
            
        /></a>
        <a
          href="https://www.logishotels.com/fr/hotel/hotel-borie-254254?PARTID=1012&amp;gclid=Cj0KCQjwvLLZBRDrARIsADU6ojBX_SZoGK4q8u1U_o9D7ym88hIxs1SkPMDf8VeswMveqWXBDF70HFsaApIXEALw_wcB"
          target="_blank"
        >
          <img
            style="width: 105px !important"
            src="https://hotel-restaurant-borie.fr/wp-content/themes/morrison-hotel/images/log-logis.png"
        /></a>
      </div>
    </div>
  </div>
</div>

我想要的是： Final result I want

【问题讨论】：

请显示您当前的 CSS 代码

请不要重复封闭的问题。如果提供的副本没有回答您的问题，那么 edit 原始问题并解释为什么没有。

我很抱歉我这样做是因为旧问题措辞不好，我的英语很糟糕......我不能再从那里删除它，我试过了

【参考方案1】：

在你的样式中尝试下面的 CSS

.logo-logis 
    display: flex;
    flex-direction: column;

【参考方案2】：

试试这个，但我不确定它是否工作正常，所以试试吧。

          .images 
          display: inline-flex;
          flex-direction: column;
          

【讨论】：

很抱歉没有成功，但非常感谢您提供帮助，谢谢。