使用 Flexbox,在移动设备上不考虑其父容器的宽度/最大宽度。
@media (max-width: 767px) {
.table-responsive tr {display: inline-flex; flex-wrap: wrap;}
.table-responsive td.td-smaller {flex: 98%; max-width: 98%;}
.table-responsive td.td-larger {flex: 98%; max-width: 98%;}
}
当视口宽度为 500 像素时,td.td-smaller
和 td.td-larger
会破坏其父容器的宽度。
.table-responsive {overflow-x: hidden;}
.table-responsive tr {display: inline-flex; justify-content: space-between; border-collapse: separate;}
.table-responsive td.td-smaller {flex: 38%; max-width: 38%;}
.table-responsive td.td-larger {flex: 58%; max-width: 58%;}
.table-responsive img {border-radius: 10px; max-width: 100%; height: auto;}
.table-responsive p {width: 500px; max-width: 100%;}
@media (max-width: 991px) {
.table-responsive td.td-smaller {flex: 48%; max-width: 48%;}
.table-responsive td.td-larger {flex: 48%; max-width: 48%;}
}
@media (max-width: 767px) {
.table-responsive tr {display: inline-flex; flex-wrap: wrap;}
.table-responsive td.td-smaller {flex: 98%; max-width: 98%;}
.table-responsive td.td-larger {flex: 98%; max-width: 98%;}
}
<table class="table-responsive">
<tbody>
<tr>
<td class="td-smaller"><img loading="lazy" class="alignleft size-full wp-image-230 border-radius" src="//herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/dark-bathrooms-Brisbane.jpg" alt="dark bathrooms Brisbane" width="1200" height="800" sizes="(max-width: 1200px) 100vw, 1200px"></td>
<td class="td-larger">
<h2 class="bottom-border-left">40+ 5-Star Reviews & Counting</h2>
<p><img loading="lazy" class="size-full wp-image-231 alignnone" src="//herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/5-stars.png" alt="5 star review" width="142" height="25"></p>
<p>“Absolutely brilliant service by Paul and the team in creating our dream bathrooms.”</p>
<p>—Upekha Edirisinghe</p>
<p><a class="btn btn-black" href="#">More Reviews</a></p></td>
</tr>
</tbody>
</table>
这就是它的样子in development:
答案 0 :(得分:1)
问题是您在表格行上的 display: inline-flex
在表格布局中的影响为零。表格有自己独特的布局算法,这会弄乱它们内部原本可以正常工作的各种 CSS。
要使您的布局正常工作,您不仅要更改表格行的 display
方法,还要更改表格正文和表格本身,因为它们仍然强制使用表格布局。将它们更改为 display: block
将允许表行的 display: inline-flex
工作。你可以在这里看到:
.table-responsive {overflow-x: hidden;}
.table-responsive tr {display: inline-flex; justify-content: space-between; border-collapse: separate;}
.table-responsive td.td-smaller {flex: 38%; max-width: 38%;}
.table-responsive td.td-larger {flex: 58%; max-width: 58%;}
.table-responsive img {border-radius: 10px; max-width: 100%; height: auto;}
.table-responsive p {width: 500px; max-width: 100%;}
@media (max-width: 991px) {
.table-responsive td.td-smaller {flex: 48%; max-width: 48%;}
.table-responsive td.td-larger {flex: 48%; max-width: 48%;}
}
@media (max-width: 767px) {
.table-responsive tr {display: inline-flex; flex-wrap: wrap;}
.table-responsive td.td-smaller {flex: 98%; max-width: 98%;}
.table-responsive td.td-larger {flex: 98%; max-width: 98%;}
.table-responsive, .table-responsive tbody { display: block }; /* <-- this is the fix */
}
<table class="table-responsive">
<tbody>
<tr>
<td class="td-smaller"><img loading="lazy" class="alignleft size-full wp-image-230 border-radius" src="//herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/dark-bathrooms-Brisbane.jpg" alt="dark bathrooms Brisbane" width="1200" height="800" sizes="(max-width: 1200px) 100vw, 1200px"></td>
<td class="td-larger">
<h2 class="bottom-border-left">40+ 5-Star Reviews & Counting</h2>
<p><img loading="lazy" class="size-full wp-image-231 alignnone" src="//herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/5-stars.png" alt="5 star review" width="142" height="25"></p>
<p>“Absolutely brilliant service by Paul and the team in creating our dream bathrooms.”</p>
<p>—Upekha Edirisinghe</p>
<p><a class="btn btn-black" href="#">More Reviews</a></p></td>
</tr>
</tbody>
</table>
但是,您可以看到,这并不能完全解决所有显示问题。例如,当孩子们停止溢出他们的父母时,图像仍然不太正确。请注意,它的右侧没有圆角。
与其解决 CSS 的所有小问题,不如解决根本问题,即您将 table
用于布局目的,而不是因为在这种情况下它是实际正确的语义元素。如果其中的内容实际上不是表格数据,则不应使用 table
;相反,使用语义正确的内容,然后使用 CSS 相应地调整布局。
下面,我对 HTML 进行了最简单的更改,即只替换所有与表格相关的标签 will div
。由于 div
已经默认使用普通块显示,因此该更改修复了移动设备上的所有显示问题,而无需任何其他样式。但是,显然,它会破坏您的桌面布局。您将需要添加新的 CSS 以允许在桌面上进行正确的布局,因为表格不适合您。这超出了这个问题的范围,所以我将把它留给你。
在您这样做时,请考虑合适的(即语义)HTML 是什么。例如,我下面的 div
之一应该是 section
。
.table-responsive {overflow-x: hidden;}
.table-responsive tr {display: inline-flex; justify-content: space-between; border-collapse: separate;}
.table-responsive td.td-smaller {flex: 38%; max-width: 38%;}
.table-responsive td.td-larger {flex: 58%; max-width: 58%;}
.table-responsive img {border-radius: 10px; max-width: 100%; height: auto;}
.table-responsive p {width: 500px; max-width: 100%;}
@media (max-width: 991px) {
.table-responsive td.td-smaller {flex: 48%; max-width: 48%;}
.table-responsive td.td-larger {flex: 48%; max-width: 48%;}
}
@media (max-width: 767px) {
.table-responsive tr {display: inline-flex; flex-wrap: wrap;}
.table-responsive td.td-smaller {flex: 98%; max-width: 98%;}
.table-responsive td.td-larger {flex: 98%; max-width: 98%;}
}
<div class="table-responsive">
<div>
<div>
<div class="td-smaller"><img loading="lazy" class="alignleft size-full wp-image-230 border-radius" src="//herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/dark-bathrooms-Brisbane.jpg" alt="dark bathrooms Brisbane" width="1200" height="800" sizes="(max-width: 1200px) 100vw, 1200px"></div>
<div class="td-larger">
<h2 class="bottom-border-left">40+ 5-Star Reviews & Counting</h2>
<p><img loading="lazy" class="size-full wp-image-231 alignnone" src="//herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/5-stars.png" alt="5 star review" width="142" height="25"></p>
<p>“Absolutely brilliant service by Paul and the team in creating our dream bathrooms.”</p>
<p>—Upekha Edirisinghe</p>
<p><a class="btn btn-black" href="#">More Reviews</a></p></div>
</div>
</div>
</div>
答案 1 :(得分:0)
我认为这是flex的问题,如果你想更轻松地把flex: 98%
改成width: 98%
。如果这不起作用,请将 !important
属性添加到您的代码中。像这样
flex: 98% !important
这对我有用,希望对你有用。谢谢