兄弟组件怎么粘在一起css

Posted 2023-05-10

兄弟组件怎么粘在一起css
对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解:

可选择紧接在另一个元素后的元素，且二者有相同的父级元素 下面代码中，item2和item3会有效果，而item1不会有

HTML代码：

item1
item2
item3
CSS代码：li+li font-size: 50px;

1、如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

2、相邻兄弟选择器使用加号“+”做为连接符。

示例

#p1 + p

margin-top: 50px;



This is paragraph 1.

This is paragraph 2.

This is paragraph 3.

This is paragraph 4. 参考技术A 兄弟组件粘在一起的方法：表单里的组件都有margin默认值的，所有组件之间有间距
可以用*margin:0 0;padding:0 0;对所有的内外边距初始化，或者form,inputmargin:0 0;padding:0 0;

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

【中文标题】页面调整大小时强制两个表在一个 div 中粘在一起

【英文标题】：Force two tables stick together in a div when page resize

【发布时间】：2018-08-18 20:06:25

【问题描述】：

我有一个包含两个 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>

【问题讨论】：

将table-layout: fixed; 添加到两个表中

"当浏览器最大化时，两个表格并排放置。"这是不正确的，目前，两个表格会粘在一起，因为它们的宽度是 10% 和 90%，占据了 div 中的所有空间。

【参考方案1】：

你为什么不使用 flex ？

    div
    display: flex;
    flex-direction: row;

【参考方案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

【讨论】：

感谢您的回复。现在，我又面临两个问题。尽管我已将宽度设置为 90%，但较大的表格仅占页面宽度的一半。还有有什么办法可以在页面缩小的时候增加一个水平滚动条。谢谢。