Question

我正在尝试制作像这个网站mvmtwatches.com的容器，容器是第一个，“男士手表”。

我正在使用我的prestashop主题中的代码，但我无法弄清楚如何获得相同的容器。

        <div class="homebanner-content">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="wrapper-content"><img class="img-responsive" src="..img/cms/bands.jpg" alt="Bandas homepage categoria" href="../band/"/><a href="../band/" title="Bandas"><span>Correas Intercambiables</span></a></div>
</div>
</div>
</div>

任何人都可以帮忙买一个与那个容器完全相同的容器吗？

谢谢

Answer 1

看起来你正在使用Bootstrap。所以只需使用它的网格系统。将每个.wrapper-content放置在col-sm-6内将在页面宽度超过767px时创建所需的布局。在较小的设备上，它们将显示在另一个之下。

我在示例中添加了一些CSS来定位文本。

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
.homebanner-content {
  padding: 0 15px;
}
.homebanner-content .row {
  padding: 0 5px;
}
.homebanner-content .wrapper-content {
  position: relative;
  margin: 10px -10px;
}
.homebanner-content .img-responsive {
  width: 100%;
}

.homebanner-content .wrapper-content > a {
  font-family: 'Fjalla One', sans-serif;
  font-size: 4rem;
  color: white;
  position: absolute;
  left: 50%;
  bottom: 4rem;
  letter-spacing: -2px;
  text-transform: uppercase;
  transform: translateX(-50%);
  display: inline-block;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .homebanner-content .wrapper-content > a {
    text-align: center;
    white-space: normal;
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="homebanner-content">
  <div class="row">
    <div class="col-sm-6">
      <div class="wrapper-content">
        <img class="img-responsive" 
             src="https://unsplash.it/785/630/?blur" 
             alt="Bandas homepage categoria" />
        <a href="../band" title="Bandas">
          <span>Correas Intercambiables</span></a>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="wrapper-content">
        <img class="img-responsive" 
             src="https://unsplash.it/g/785/630/?blur" 
             alt="Bandas homepage categoria" />
        <a href="../band/" title="Bandas">
          <span>Correas Intercambiables</span></a>
      </div>
    </div>
  </div>
</div>

Answer 2

这看起来怎么样？查看此链接：https://jsfiddle.net/j4cd9awv/

HTML

ground.size = CGSize(width: self.size.width, height: 175)
ground.position = CGPointMake(0, 0)
ground.physicsBody = SKPhysicsBody(rectangleOfSize: ground.size())

CSS

<section class="home-tile-container home-tile-container-a">

  <div class="home-tile-half home-tile-1">
    <a href="/collections/all-mens-watches">
        <div class="hover-overlay"></div>
        <div class="cta-content">
            <h3 class="white"><span>mens watches</span></h3>
            <button class="button button--white">shop now</button>
        </div>
    </a>
  </div> 
</section>

Answer 3

在Bootstrap中，您不需要将多个网格类应用于一个元素。如果您尝试镜像您列出的网站，那么父容器中的每个子项都应使用类col-lg-6，因为有两个项目且断点非常大。

Bootstrap使用网格布局，其中元素必须加起来为12，所以我建议像：

<div class="row">
<div class="col-lg-6">
  <img class="img-responsive" src="..img/cms/bands.jpg" alt="Bandas homepage categoria" href="../band/"/>
</div>
<div class="col-lg-6">
  <img class="img-responsive" src="..img/cms/bands.jpg" alt="Bandas homepage categoria" href="../band/"/>
</div>

我不能使这个容器css - HTML

3 个答案: