Question

我有一个包含两个html表的div。当浏览器最大化时，两个表并排放置。当我减小页面大小时，其中一个表位于另一个下面。在任何情况下，如何强制这两张桌子粘在一起。

div{
    width: 100%;
}

.table1 {
    width: 10%;
    float: right;
    margin: 0 auto;
    padding: 0;
    overflow:hidden;
}

.table2 {
    width: 90%;
    float: left;
    margin: 0 auto;
    padding: 0;
    overflow:hidden;
}

<div>
    <table class="table1">...</table>
    <table class="table2">...</table>
</div>

Answer 1

为什么不使用flex？

    div{
    display: flex;
    flex-direction: row;
}

Answer 2

试试这个

我使用flex for table parent(div)。

flex-direction: row-reverse;，table1到右侧。

div {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
table {
  height: 75px;
}
.table1 {
  width: 10%;
  padding: 0;
  overflow: hidden;
  background: red;
}
.table2 {
  width: 90%;
  padding: 0;
  overflow: hidden;
  background: green;
}

<div>
    <table class="table1"></table>
    <table class="table2"></table>
</div>

了解有关FLEX

的更多信息

当页面调整大小时，强制两个表在div中粘在一起

2 个答案: