javascript - 如何生成测试广告以检查 div 宽度是否足以容纳广告?
问题描述
我想为帖子详细信息页面实现这样的布局,有一个标题,标题下方是一些文本,然后是图像,图像下方是帖子文本。在右边,我想在一些热门帖子下方展示广告。
怀疑:布局工作正常,我怀疑是否有某种方法可以生成广告示例以放入布局中,文本“如何在此处放置测试广告以检查尺寸是否合适?” 检查具有 .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>
解决方案
你在 CSS 中为min-width: 300px
你的班级设置了一个。.ads
但是您也使用网格来设置col-9
和col-3
. 所以你基本上是说,左列应该占宽度的 75%,右列应该占 25%。
但是,因为您正在设置min-width
to 300px
,所以这具有优先权。
如果你有一个很1000px
宽的容器,第一个 col 将是750px
. 由于只剩250px
下空间了,你的min-width
声明将保证正确的 col 总是至少300px
,所以 col 必须掉下来。
如果您删除该ads
div 上的类,您将看到该列现在适合。但这并不能解决您300px
的广告问题。
如果您始终需要 300 像素,则必须使用响应式网格类响应式地调整布局,也许其他 div 的宽度只有到特定屏幕尺寸的一半;或者可能使用单列布局达到一定的屏幕尺寸。
推荐阅读
- php - 如何在 Laravel 刀片上计算
- twig - Twig批处理功能:2、3、2项
- javascript - 如何从 json 输出计算空闲可用时间?
- c# - 关于 CollectionView 取消选中 SelectedItem
- autodesk-forge - 如何以并行方式最好地处理多个 WorkItem?
- httpwebrequest - 字母之间的 Tika 额外空格 - 有没有办法通过 Web API 使用 setEnableAutoSpace?
- multiclass-classification - 多类分类一对一
- python - Python:使用 Numpy 更快地生成二维数组
- c - 我想使用带有 C 的函数对列表进行求和和幂运算
- azure-devops - 如何有条件地设置 Azure DevOps 参数的值?