如何生成测试广告以检查 div 宽度是否足够投放广告？

Question

我想为 post 详细信息页面实现这样的布局，其中有一个标题，标题下方是一些文本，然后是图像，图像下方是 post 文本。在右边我想展示一个广告，下面是一些流行的 posts。

疑问：布局工作正常，我的疑问是是否有某种方法可以生成广告示例以放入布局中文本在哪里"How to put here a test ad just to check if the size is appropriate?" 检查带有 class .col-3 的 div 的大小是否足以显示广告。

布局示例：http://jsfiddle.net/t1cLb3uq/

HTML:

<div class="bg-white">
  <div class="container py-4">
    <div class="row">
      <div class="col-9">
        <div class="article_details_title mt-3">
          <h1 class="font-weight-bold text-custom-blue-dark2">Example title test for test post</h1>
          <p class="article_details_clue">Some text.</p>
        </div>
        <div class="article_details_img mt-3">
          <img src="https://via.placeholder.com/768x350" alt="">
        </div>
        <div class="article_details_text">
          <p class="article_details_text mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolores eligendi esse et
            eum expedita fugiat inventore ipsum, necessitatibus nihil
            optio, repellat suscipit tenetur totam ullam? Fugit ipsum itaque qui.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolores eligendi esse et
            eum expedita fugiat inventore ipsum, necessitatibus nihil
            optio, repellat suscipit tenetur totam ullam? Fugit ipsum itaque qui  Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Cum dolores eligendi esse et
            eum expedita fugiat inventore ipsum, necessitatibus nihil
            optio, repellat suscipit tenetur totam ullam? Fugit ipsum itaque qui.</p>
        </div>
      </div>
      <div class="col-3 ml-auto">
        <div class="bg-custom-light2 p-0">
          <h2 class="font-weight-bold populars h5 text-center  py-3 m-0 rounded-0">
            Popular</h2>
          <ul class="list-group list-popular-category border-0">
            <li class="list-group-item d-flex justify-content-between align-items-center rounded-0 border-top-0">
              <div>
                <h6 class="font-weight-bold popular_article_title text-custom-blue-dark">Title</h6>
                <p class="popular_article_date">date</p>
              </div>
              <img class="ml-2" src="https://via.placeholder.com/50" alt="">
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center rounded-0 border-top-0">
              <div>
                <h6 class="font-weight-bold popular_article_title text-custom-blue-dark">Title</h6>
                <p class="popular_article_date">date</p>
              </div>
              <img class="ml-2" src="https://via.placeholder.com/50" alt="">
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center rounded-0 border-top-0">
              <div>
                <h6 class="font-weight-bold popular_article_title text-custom-blue-dark">Title</h6>
                <p class="popular_article_date">date</p>
              </div>
              <img class="ml-2" src="https://via.placeholder.com/50" alt="">
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您正在 CSS 中的 .ads class 上设置 min-width: 300px。但是您还使用网格来设置 col-9 和 col-3。所以你基本上是说，左列应该占宽度的 75%，右列应该占宽度的 25%。

但是，因为您将 min-width 设置为 300px，所以优先。

如果您有一个 1000px 宽的容器，第一个列将为 750px。由于只剩下 250px 的空间，您的 min-width 声明将保证右侧的 col 始终至少为 300px，因此 col 必须下降。

如果删除 div 上的 ads class，您会看到该列现在适合。但这并不能解决您的广告 300px 的问题。

如果您一直都需要 300 像素，则必须使用响应式网格 classes 响应式地调整您的布局，也许其他 div 只有一半宽度达到某个屏幕尺寸;或者在特定屏幕尺寸下使用单列布局。

在此处阅读：https://getbootstrap.com/docs/4.1/layout/grid/

如何生成测试广告以检查 div 宽度是否足够投放广告？

How to generate a test ad to check if the div width is enough for the ad?

javascript

css

ads

web

twitter-bootstrap