Question

我一直关注此guide，为我的电子商务网站上的每个产品页面创建一个标签。我需要有关如何使此选项卡显示在产品图像旁边的帮助。此时标签显示在图像下方。

图片CSS：

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

Tab 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;
}

了解ya

的效果如何

Answer 2

要将您网站上的标签框移动到图片旁边，请使用此.tabs的CSS：

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

重要的是添加float:left;并删除clear:both;。其余的你可以玩，以使其最佳。

如何对齐选项卡旁边的图像

2 个答案: