如何将图像与选项卡对齐

Question

我一直在遵循本指南为我的电子商务网站上的每个产品页面创建一个选项卡。我需要关于如何使此选项卡显示在产品图像旁边的帮助。现在，选项卡显示在图像下方。

图像CSS:

.product_image {
  float: left;
  width: 200px;
  padding: 20px;
  margin: 0 20px 20px 0;
}

选项卡CSS:

    .tabs {
      position: relative;   
      min-height: 200px;
      clear: both;
      margin: 25px 0;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: #eee; 
      padding: 10px; 
      border: 1px solid #ccc; 
      margin-left: -1px; 
      position: relative;
      left: 1px; 
    }
    .tab [type=radio] {
      display: none;   
    }
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc; 
    }
    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }

我正在使用一个名为Pronto 的主题

以下是页面的宽度和其他详细信息，以备参考：

.container { margin: 0 auto; padding: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.container-left { position: absolute; left: 40px; top: 40px; width: 200px; }
.container-right { padding-left: 240px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.single .container-right,
.page .container-right { max-width: 1120px; min-width: 500px; }
.boxed { background: #d9d9d9; padding: 30px; box-shadow: 0 1px 1px rgba(0,0,0,0.15); }
/* Body, Main & Commons

非常感谢您的帮助。

Answer 1

尝试添加position:relative;

.product_image {
  float: left;
  position:relative;
  width: 200px;
  padding: 20px;
  margin: 0 20px 20px 0;
}

看看你的是如何运作的

Answer 2

要将站点上的选项卡外壳移动到图像旁边，请使用.tabs:的CSS

.tabs {
    position: relative;
    float:left;
    min-height: 200px;
    margin: 25px 0;
    width: 560px;
}

此处重要的是添加float:left;和删除clear:both;。剩下的你可以一起玩，让它最适合。