如何解决将HTML元素环绕表格引导程序
我认为使用基本引导程序是不可能的,但这就是我正在使用的CSS框架。我正在使用引导程序列,但是如果没有它们,有办法做到这一点。
基本上我有2列。右边的列应为表格的自动高度。它只能包含一个表,但是该表可以包含文本图像等。
然后,左侧的列应包含所有元素,直到达到右侧表格的高度为止,然后将它们包裹在表格下方。
具有以下效果的网站示例: Link to site example
<div class ="row">
<div class ="col-md-8">
//elements here like images,headers,lists,etc
</div>
<div class ="col-md-4">
//table here
<table class ="table table-bordered">
</table>
</div>
</div>
<div class ="row">
<div class ="col-md-12">
</div>
</div>
解决方法
您尚未提供CSS,所以我使用了默认的引导CSS文件:
这是经过重组的HTML / CSS:
.left-div {
display: table;
vertical-align: top;
background-color: #b2b2b2;
}
.content-div {
display: table-cell;
vertical-align: top;
width: auto;
}
.table-div {
float: right;
display: block;
vertical-align: top;
width: 300px;
height: 150px;
background-color: #c2c2c2;
}
.table-bordered {
background-color: #000000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row special-row">
<div class="col-md-12 left-div">
<div class="content-div">
<div class="table-div">
<table class="table table-bordered">
<p>//table here//table here//table here//table here//table here//table here//table here//table here</p>
</table>
</div>
<div class="your-contents">
<p>//elements here like images,headers,lists,etc//elements here like images,etc//elements
here like images,etc//elements here
like images,etc//elements here like
images,etc</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。