Fatal编程技术网
  • html/
  • Html Rails 5.2部分列，背景图像在页面上呈现方式不同

Html Rails 5.2部分列，背景图像在页面上呈现方式不同

html css

Html Rails 5.2部分列，背景图像在页面上呈现方式不同,html,css,ruby-on-rails-5,Html,Css,Ruby On Rails 5,我在一个页面上有三个不同的位置，其中相同的部分被呈现。该部分包括引导col-sm-4/col-sm-8情况，该情况应使图像占据页面的三分之一，而文本占据其他2/3。但是，在每个实例中，局部渲染都不同： 这是一个页面（它是blogs#index）： 以下是相关CSS： .blog-title-box { box-shadow: 0 10px 20px rgba(183, 173, 153, 0.19), 0 6px 6px rgba(183, 173, 153, 0.23); } .blo

我在一个页面上有三个不同的位置，其中相同的部分被呈现。该部分包括引导
col-sm-4
/
col-sm-8
情况，该情况应使图像占据页面的三分之一，而文本占据其他2/3。但是，在每个实例中，局部渲染都不同：

这是一个页面（它是
blogs#index
）：

以下是相关CSS：

.blog-title-box {
  box-shadow: 0 10px 20px rgba(183, 173, 153, 0.19), 0 6px 6px rgba(183, 173, 153, 0.23);
}

.blog-title-box:hover {
  box-shadow: 0 14px 28px rgba(183, 173, 153, 0.30), 0 10px 10px rgba(183, 173, 153, 0.22);
}

.blog-title-box .image {
  height: 300px;
}

#big-feature a:hover,
#most-popular a:hover,
#featured a:hover {
  text-decoration: none !important;
}

.blog-title-box .text p {
  color: black;
}

.blog-title-box .text p.author {
  color: $color-grey;
  font-style: oblique;
}

.background-image {
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  max-width: 100%;
}
有人知道为什么只有“最受欢迎”下的博客渲染正确吗

其他信息

根据Chrome inspector，以下是页面在HTML中的呈现方式：

<main class="container">

  <div class="row">

    <div class="col-12" id="big-feature">
        <a href="/blogs/3">
  </a><div class="blog-title-box my-3"><a href="/blogs/3">
    </a><div class="row"><a href="/blogs/3">

      <div class="image background-image col-md-4" style="background-image: url('https://media.istockphoto.com/photos/water-with-splash-and-bubbles-picture-id952077910')">
      </div> <!-- image col -->

      </a><div class="text col-sm-8 px-4 py-3"><a href="/blogs/3">
        <h3>Test for Big Feature</h3>
        <p>Teaser Goes Here.  Yes, all the things.</p>
        </a><p class="tags"><a href="/blogs/3">
          </a><a href="/tagged?tag=Big+Post">Big Post</a>

          <a href="/tagged?tag=Testing">Testing</a>
        </p>
        <p class="author"> By lizbayardelle@gmail.com on September 26, 2019</p>
      </div> <!-- text col -->

    </div> <!-- row -->
  </div> <!-- blog title box -->
 <!-- link to blog -->

       <!-- each do -->
    </div> <!-- col -->

    <div class="col-sm-6" id="most-popular">
      <h2>Most Popular</h2>
        <a href="/blogs/2">
  <div class="blog-title-box my-3">
    <div class="row">

      <div class="image background-image col-md-4" style="background-image: url('https://i.guim.co.uk/img/media/9ebfe6eb392f208e944a21d1903b698965d35527/0_0_7360_4417/master/7360.jpg?width=700&amp;quality=45&amp;auto=format&amp;fit=max&amp;dpr=2&amp;s=2b05fd52feeac284411af1bf1215d1d6')">
      </div> <!-- image col -->

      <div class="text col-sm-8 px-4 py-3">
        <h3>Test Blog</h3>

        <p class="tags"></p>
        <p class="author"> By lizbayardelle@gmail.com on September 24, 2019</p>
      </div> <!-- text col -->

    </div> <!-- row -->
  </div> <!-- blog title box -->
</a> <!-- link to blog -->

       <!-- each blog do -->
    </div> <!-- col -->

    <div class="col-sm-6" id="featured">
      <h2>Featured</h2>
        <a href="/blogs/1">
  </a><div class="blog-title-box my-3"><a href="/blogs/1">
    </a><div class="row"><a href="/blogs/1">

      <div class="image background-image col-md-4" style="background-image: url('https://i.guim.co.uk/img/media/9ebfe6eb392f208e944a21d1903b698965d35527/0_0_7360_4417/master/7360.jpg?width=700&amp;quality=45&amp;auto=format&amp;fit=max&amp;dpr=2&amp;s=2b05fd52feeac284411af1bf1215d1d6')">
      </div> <!-- image col -->

      </a><div class="text col-sm-8 px-4 py-3"><a href="/blogs/1">
        <h3>Yet Another Test Blog</h3>

        </a><p class="tags"><a href="/blogs/1">
          </a><a href="/tagged?tag=Fake+Content+Testing">Fake Content Testing</a>
        </p>
        <p class="author"> By lizbayardelle@gmail.com on September 25, 2019</p>
      </div> <!-- text col -->

    </div> <!-- row -->
  </div> <!-- blog title box -->
 <!-- link to blog -->

       <!-- each blog do -->
    </div> <!-- col -->

  </div> <!-- row -->

</main>






作者lizbayardelle@gmail.com2019年9月26日

最受欢迎
作为特色的




作者lizbayardelle@gmail.com2019年9月25日
更多信息

您可以看到。

您的RoR代码似乎正确。你的博客卡应该只有一个锚（





通过xxx@yyy.com2019年10月1日
该示例正确地获得了所需的设计（图像的1/3）

但是您提供给HTML结果的链接（issue live）显示了重复的锚，其中一些锚是空的：

<div class="blog-title-box my-3"><a href="/blogs/3"></a>
其他的没有。这一个特别打破了设计：

<div class="row">
  <a href="/blogs/3"> <!-- unexpected anchor breaking the design -->
    <div class="image background-image col-md-4"
         style="background-image: url('<the-url>')">
      <!-- [...] -->
    </div>
因为我看不到实际执行的代码，所以我不能再进一步了。我猜你必须在你的RoR代码中看到插入这些恼人锚的内容。你确定真正执行的代码就是你在问题中粘贴的代码吗？

在这个实例中，我看到了以下代码：

<div class="row">
  <a href="/blogs/1">
      <div class="image background-image col-md-4" style="background-image: url('https://media.istockphoto.com/photos/water-with-splash-and-bubbles-picture-id952077910')">
  </div> <!-- image col -->

  </a>

  <div class="text col-sm-8 px-4 py-3"><a href="/blogs/1">
    <h3>
      Sample Blog for Big Feature
    </h3>
    <p>Teaser Goes Here. Yes, all the things.</p>
    </a><p class="tags"><a href="/blogs/1">
        </a><a href="/tagged?tag=Testing">Testing</a>
        <a href="/tagged?tag=Big+Post">Big Post</a>
    </p>
    <p class="author">
      By lizbayardelle@gmail.com on October 01, 2019
    </p>
  </div> <!-- text col -->

</div>
您可以添加以下css以获得与col-md-4相同的效果：

@media (min-width: 768px) {
    .row > a {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}
出现这种情况的根本原因似乎是您在另一个定位标记中嵌套了一个定位标记

有人知道为什么只有“最受欢迎”下的博客渲染正确吗

与其他示例不同，此示例呈现正确，因为它在描述性文本中没有链接（锚定标记）

当你在Chrome inspector中查看被破坏的布局的代码时，它已经移动了锚定标记以尝试创建非法代码（嵌套锚定标记）。但是如果你查看原始源代码（查看页面源代码）您将看到RoR代码的原始输出。

@Amesshiel我将其添加到了OP中。感谢您的帮助！@Amesshiel我添加了一个到问题现场的链接。有太多的库无法可靠地使用代码段。您的方法似乎很好，因为在html5中使用锚定标记包装div是有效的。我提供的代码修复了布局问题lem。如果锚定标签不在那里，我就无法帮助您处理RoR代码。抱歉，这不是我的专业领域。祝您一切顺利。我相信我找到了答案，因为锚定标签嵌套了，并将其作为一个新的答案发布。一次出现多个
标签并没有问题，但任何时候背景图像周围都有一个标签e它显示了此故障。非常感谢您的帮助！ 
<div class="row">
  <a href="/blogs/3"> <!-- unexpected anchor breaking the design -->
    <div class="image background-image col-md-4"
         style="background-image: url('<the-url>')">
      <!-- [...] -->
    </div>

<div class="row">
  <a href="/blogs/1">
      <div class="image background-image col-md-4" style="background-image: url('https://media.istockphoto.com/photos/water-with-splash-and-bubbles-picture-id952077910')">
  </div> <!-- image col -->

  </a>

  <div class="text col-sm-8 px-4 py-3"><a href="/blogs/1">
    <h3>
      Sample Blog for Big Feature
    </h3>
    <p>Teaser Goes Here. Yes, all the things.</p>
    </a><p class="tags"><a href="/blogs/1">
        </a><a href="/tagged?tag=Testing">Testing</a>
        <a href="/tagged?tag=Big+Post">Big Post</a>
    </p>
    <p class="author">
      By lizbayardelle@gmail.com on October 01, 2019
    </p>
  </div> <!-- text col -->

</div>

<a href="/blogs/1" class="col-md-4">

@media (min-width: 768px) {
    .row > a {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}